CSS，指的是Cascading Style Sheet（层叠样式表），是用来控制网页外观的一门技术。在这次的课中，我们从“CSS 选择器的特异度”、“CSS 继承”、“CSS 求值过程”、“CSS 布局方式及相关技术”这几个方面来深入了解CSS。
一、CSS 选择器的特异度
如果有两条或两条以上指向同一元素的冲突 CSS 规则，则浏览器将遵循一些原则来确定哪一条是最具体的，并因此胜出。简单来说，CSS特异度就是CSS样式选择器的权重计算。从而让那些样式应用到元素上。
特异度有其计算规则：
以一个 0 0 0 0 四位数为样式的权重总和：
1、从最低的元素、伪元素选择器 在个位+1 就是 0 0 0 1
2、类、属性、伪类 在十位数+1 就是 0 0 1 0
3、ID选择器 在百位数+1 就是 0 1 0 0
4、行内样式 在千位数+1 就是 1 0 0 0
比较每一个权重值的总和，大的样式优先。如果有相同权重的，就按照定义的顺序优先的样式
二、CSS 继承
继承就是某些属性会自动继承其父元素的计算值，除非显式指定一个值。
CSS的继承性是指：CSS规则集从父选择器到子选择器在CSS层次结构中层层递减。这些CSS规则集是从它们的父选择器中继承来的。如果没有指定CSS属性，子元素将自然地从父元素那里继承一个带有其值的CSS属性。
显式继承inherit：当你在一个CSS属性上设置inherit ，该属性就会从元素的父辈那里取值。这不仅适用于可继承的属性，也适用于所有的CSS属性。
当向上查找无法找到相对应的css值时，会用到初始值。css中，每个属性都有一个初始值，可以使用intial关键字显式重置为初始值。
三、CSS 求值过程
简单来说，css的求值过程就是浏览器拿到HTML之后会将其解析为一个DOM树，并收集样式规则。接下来将会去找到每一个个元素对应的css的属性值。
详细的求值情况如下：
1、筛选规则，看看选择器是否匹配，找到所有匹配的元素，得到一组组能够匹配的声明值。
2、根据来源、！Important、选择器特异性、书写顺序等选出优先级最高的一个属性值。该值也成为层叠值。
3、当层叠值为空的时候，使用继承或初始值。即为指定值。
4、将一些相对值或者关键字转化成绝对值，得到计算值。要注意的是，子元素继承的时候，是继承父元素的计算值。
5、将计算值进一步转换，得到最后的使用值，使用值是在某些需要根据具体的渲染环境才能计算处理的情况下才得到的，和计算值是有区别的。
6、最后，将一些特使的值进行处理，得到最后的实际值。也即是渲染的最后效果。
四、CSS 布局方式及相关技术
布局，确定内容的大小和位置的算法。依据元素、容器、兄弟节点和内容等信息来计算。CSS提供了多种布局方式，使开发者能够根据需求选择合适的布局技术。其中比较大的三种布局方式为：
1、常规流：所有元素，默认情况下，默认都属于常规流布局
1）布局的总体规则：块盒独占一行，行盒水平依次排列
①块盒
每个块盒总宽度，必须刚好等于包含块的宽度，宽度的默认值是auto，auto将剩余空间吸收掉，若宽度边框内边距计算后仍然有剩余空间，该剩余空间被margin-right吸收。
在常规流中，块盒在其包含快中居中可以定宽margin：0 auto。
padding、margin、可以取值为百分比，相对于包含块的宽度。包含块的高度是否取决于子元素的高度，设置百分比无效，包含块高度不取决于子元素高度，百分比相对于父元素的高度。
上下外边距合并，上下边距相邻、会进行合并，两个值取最大值。
2、浮动：这个属性可以让元素排队。
-left：元素靠上靠左排列
-right：元素靠上靠右排列
-none：默认值，常规流
1）浮动的基本特点：当一个元素浮动后，一定是块盒、浮动元素的包含块，和常规流一样，为父元素内容盒。
2）浮动元素盒子尺寸
①宽度为auto时，适应内容宽度；
②height为auto，与常规流一致，适应内容高度；
③margin为auto，为0；
④边框、内边距、百分比设置与常规流一样。
3）盒子排列
左浮动的盒子靠上靠左排列、右浮动的盒子考上靠右排列、浮动盒子在包含块中排列时，会避开常规流快盒、常规流块盒在排列时，无视浮动盒子、行盒在排列时，会避开浮动盒子、外边距盒子不会发生外边距合并。
4）清除浮动：可以有两种方式，设计css属性以及伪元素清除法。
①设计css属性：clear
-默认值 none
-left清除左浮动，该元素必须出现在前面所有左浮动盒子的下方
-right清除右浮动，该元素必须出现在前面所有右浮动盒子的下方
-both清楚两侧浮动，该元素必须出现在浮动元素的下方
3、绝对定位
当你希望某一元素出现在特定位置的时候，可以使用绝对定位，然后配合着 top、 left、right、 bottom 一起用（距离某一方向多少像素，但是 left 和 right 不能同时出现，并且 left 是左边线距离浏览器多少像素， right 是右边线距离浏览器多少像素， top是上边线距离浏览器多少像素，一般不用 bottom），但是， 他会脱离原来的位置进行定位（会向上一层，底下的位置会空出来，其他的元素顶上去），它是相对于最近的有定位的父级进行定位，如果没有，那么相对于文档进行定位。
