继承

样式的继承，我们为一个元素设置的样式同时也会应用到它的后代元素上（后代元素！！不是后代的不会继承）

image.png

例如为p设置了样式，那么p中的span元素也会被设置样式

image.png
image.png
注意：并不是所有样式都会继承，比如背景相关的，布局相关的就不会被继承

选择器的权重

有时候不同的选择器会选择到相同的样式，这样就会发生样式的冲突，发生样式的冲突时，就按照选择器的权重（优先级）来决定

image.png

内联样式>id选择器>类和伪类选择器>元素选择器...

image.png
比较优先级时，需要将所有选择器的优先级进行相加计算，最后优先级越高就越优先显示（分组选择器是单独计算的）
例如： image.png

其中div#box1的优先级是101，#box1的优先级是100，所以显示的是黄颜色。分组选择器是指-选择器1，选择器2，选择器3...这种的的就不会累加计算，而是单个计算。
！！！注意：选择器的累加不会超过其最大的数量级，就比如类选择器的累加不会超过id选择器。如果优先级计算后相同，那么靠下的样式生效。

像素和百分比

image.png

em和rem

1.em是根据相对元素的大小计算的
1em=1 font-size，em会根据字体的大小改变而改变
2.rem是根据根元素（html本身的字体）的大小而计算的
只有改变html的字体rem才会发生改变，改变font-size不会发生变化

RGB

image.png

HSL（用得少）

image.png
HSLA其中的a也表示透明度 image.png

文档流

image.png

文档流是最底下那层，块元素和行内元素在文档流中各不相同