css基础回顾

1、css选择器分类：

id选择器，类选择器，通用选择器，

包含（后代）选择器——加入空格，用于选择指定标签元素下的后辈元素。

子选择器（大于符号）——用于指定标签元素的第一代子元素。

伪类选择器——允许给html中不存在的标签（标签的某种状态）设置样式，like：a：hover

分组选择器——用逗号隔开，为多个标签设置同一个样式时。

2、css的继承，层叠，特殊性

继承：设置给某一标签的样式会被继承到该标签元素的子元素

特殊性：浏览器根据权值来判断使用哪种css样式，权值高就使用哪种css样式。标签的权值为1，类选择符的权值为10，id选择器的权值为100

层叠：如果html文件中对同一个元素有多个样式的存在，且有相同权值的情况下，会根据样式的前后顺序来决定处于最后面的css样式会被使用。

3、!important的使用

p{color:red!important;}

为最高权值。浏览器默认的样式<网页制作者的样式<用户自己设置的样式<!important的权值

4、html标签元素分类

块状元素：div,p,table,h1...h6,ul,form ——block ——特点：每个块状元素都是霸占一行；高，宽，行高，顶，底边距都可设置；不设置的情况下宽度是它父容器的100%

内联元素：a,span,br,label ——inline ——特点：和其他元素都在一行上；高，宽等不可设置

内联块状元素：input, img ——inline-block ——特点：和其他元素都在一行上；高，宽，行高等可以设置

5、css盒子模型的宽度和高度

css中定义的宽和高指的是填充以里的内容宽度。一个元素的实际宽度（盒子的宽度），需要加上他的左边距，右边距，左边框，右边框，左填充，右填充

6、css布局模型：流动模型，层模型，浮动模型

重点回顾下层模型：

层模型一般在局部布局的时候使用，主要三种：绝对定位，相对定位，固定定位

绝对定位：将元素从文档流中拖出来，然后使用left,right,top,bottom属性相对于其最接近的一个具有定位属性的父包含块（abolute和relative的结合使用）进行绝对定位。如果不存在这样的包含块，则相对于body元素，即浏览器窗口。

相对定位：注意一点：就是偏移前的位置保留不动。也就是说虽然在显示结果上来说是偏移了，但实际上的之前的位置，浏览器是给你保存下来，如果该元素后有其他的元素，那么其他元素的显示结果还是按照偏移前的位置，也就是原样保持不动。

固定定位：固定定位的相对移动坐标是视图本身，不会随着滚动条滚动而变化，始终位于浏览器窗口内试图的某个位置，不会受文档流动影响。

巴特西