深入理解CSS（上）|青训营
CSS选择器的特异度
CSS 选择器优先级，也叫特异性，是指在给 HTML 元素应用样式时，如果有多个 CSS 选择器同时指向了这个元素，那么优先级高的选择器的样式会最终应用到这个元素上。
不同选择器的权重
CSS 选择器的优先级是通过权重计算来得到的，选择器权重分为三大类，从高到低依次是：
- ID 选择器
- Class、属性和伪类选择器
- 类型和伪元素选择器
除了选择器之外，行内样式的优先级最高，也就是通过 html 中的 style 属性定义的样式。但是它的权重也可能会被!important覆盖。
继承
某些属性会自动继承父元素的计算值，除非显式指定一个值。一般和字体相关的都可以继承，盒模型相关的都不能继承
显式继承
- inherit关键字： 有时，我们想用继承代替层叠值。这时候可以用inherit关键字。可以用它来覆盖另一个值，这样该元素就会继承其父元素的值。
初始值
- initial关键字： 在CSS中，每一个属性都有一个初始（默认）值。如果将initial值赋给某个属性，那么就会有效的将其属性重置为默认值，这种操作相当于硬生生的复位了该值。
CSS求值过程解析
求值过程：
- 确定声明值(参考样式表中没有冲突的声明,作为css属性值)
- 层叠冲突(对样式表有冲突的声明使用层叠规则,确定css值)
- 使用继承(对仍然没有值的属性,若可以继承,则继承父元素的值)
- 使用默认值(对仍然没有值的属性,使用默认值)
- resolving能转换的值，只看css和html就能算出具体值的
- formatting转换的值，是需要布局后才能知道的值，比如百分比等，要知道父元素的大小才能计算
- 继承过程中，子元素是继承到父元素的计算值，即如果父元素是1.2em，那子元素继承的不是1.2em，而是父元素通过resolving得到的计算值
CSS布局方式及相关技术
定义
- 确定内容的大小的位置的算法
- 依据元素、容器、兄弟节点和内容等信息来计算
布局相关技术
- 常规流：行级、块级、表格布局、FiexBox、Crid布局
- 浮动
- 绝对定位
盒模型
- 注意height和width设置百分比时，表示相对于容器的content box的大小，容器有指定高度时，百分数才生效。
- 注意padding设置百分数也是相对于容器宽度。
- 当四条边框颜色不同时，边角处是这样切分的，将元素宽高设置为0，再把其中的几个边框设为透明，则可以得到各种三角形
margin:0 auto可以实现水平居中- margin collapse指在垂直方向上有margin的折叠，两者之间的间距取的是最大的margin设置，在文字排版上会比较方便
- 设置
box-sizing:border-box后，指定的宽高是加上了border和padding的大小
