css学习笔记

css选择器css常用属性css盒子模型css浮动css定位

css选择器

1.css选择器在head标签里面 css元素选择器

这是元素选择器

元素选择器，在head标签中的style标签里面设定字体大小或者字体颜色。在body中加上h2标签，这样h2标签中的内容就会应用元素选择器设置的配置了

2.css之class类选择器

这是一个类选择器

快速写出 只需要输入h3.hightlight就可以了

按照上面输入的话，会出现class。 如果想要出现id的话，h3#header就可以了

3.css之id类选择器

这是另外一个类选择器

和上面的很相似，只不过一个是class，一个是id。class用点号。id用#号

4.css选择器全部应用 使用*

会出现粉色背景 5.css之子元素选择器

子选择器通常应用在div中。在style标签中，使用.父名字 > .子名字来对子元素进行操作。只针对p标签

6.css之相邻选择器

这是一个普通的p标签

这是一个相邻兄弟选择器

这是另一个p标签

这个会对h3后面的p进行操作

css常用属性

1.css块级元素，在div标签内

如果代码换成了如下，会得到每一行都是单独的一行

块级元素独占一整行，且设置背景颜色的时候也是，即使没有文字

2.行内元素，在span标签内

这是一个行内元素

后面是空白的，如果我们此时把代码换成如下

这是一个行内元素

这是一个行内元素

这是一个行内元素

所以行内元素是一直往后去排列，知道排不下。

3.css行内块元素

4.css块级元素转换行内元素

5.css行内元素转换成行内块元素

这是一个转换成行内块的span标签

css盒子模型

设置边框，行内块元素，display设置=inline-block，可以设置宽度，高度等

上面的是简写，border后面分别代表的是，边框宽度，边框类型：实线，虚线，边框颜色 也可以按照下面的写，注意border-width 可以设置4个数值，分别对应上右下左

border-width: 5px;

border-style: solid;

border-color: brown;

css浮动

浮动，在子标签中使用float：left/right来设定 overflow：hidden可以解决重新输入文本框链接在浮动块级的后面导致排版不好看的问题

css定位

1.相对定位不会脱离原来的位置，在指定的div标签中，加上position: relative;

相对定位

2.绝对定位 会脱离原来的位置

绝对定位

3.固定定位 会固定在某一个位置不会随着滚动而改变位置

固定定位

好文推荐

 您阅读本篇文章共花了：