课程重点
- CSS 选择器的特异度
- CSS 继承
- CSS 布局方式及相关技术
1. CSS 选择器的特异度
根据id、(伪)类、标签的数量计算CSS选择器特异度的大小，特异度值越大，则选择器的优先级越高。在重要程度上，id > (伪)类 > 标签。越重要的类别数量越多，则选择器的特异性越大。例子如下图所示：
特异性大的选择器中的样式会覆盖其他样式。
2. CSS 继承
CSS的继承指：某些属性（如color、font-size属性）会自动继承其父元素的计算值，除非显式指定一个值。例子如下图所示：虽然“strong”标签内没有设置color属性，但是找到“strong”标签的父元素"p"标签中设置了color属性为blue，所以“strong”标签内文字颜色也是blue。一般来说CSS中和文字相关的属性都是可以继承的。
如果想要使原本不可继承的属性变得可以继承，则可以通过显示继承的方式进行，使用"inherit"关键字，如下图所示：
此外，CSS中每个属性都有一个初始值：
- background-color的初始值为transparent
- margin-left的初始值为0
- 可以使用initial关键字显式地重置属性值为初始值，如background-color: initial。
3. CSS 布局方式及相关技术
布局（layout）是指：
- 确定内容的大小和位置的算法。
- 依据元素、容器、兄弟节点和内容等信息来计算。
布局相关技术：（1）常规流：包括行级、块级、表格布局、FlexBox、Grid布局；（2）浮动（float）；（3）绝对定位。
- margin: auto可以用于使元素水平居中（将margin-left和margin-right的属性值都设置为auto）。
- overflow属性可以用于控制文字溢出边框的情况，属性值为auto时可以比较自动转换模式。
- display属性，如下图所示：
Grid布局
与FlexBox一维的布局相比，Grid进行的是二维的布局，如下图所示：
划分网格的方法如下图所示：
网格线定位表示方法：
float（浮动）布局
为了实现文字环绕的布局效果，多用于文字环绕图片的场景。代码写法及实现效果如下图所示：
