继承、选择器权重、颜色、文档流
2023-01-13 本文已影响0人
Tn299
继承
样式的继承，我们为一个元素设置的样式同时也会应用到它的后代元素上（后代元素！！不是后代的不会继承）
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
文档流是最底下那层，块元素和行内元素在文档流中各不相同
