选择器优先级

内联 > id > class=attribute=pseudo-class > type=pseudo-element

内联样式不属于选择器

:is() :not() :has() 本身不计入优先级,以参数中最高的优先级为准, :where()优先级为0

源码顺序

1. 对于@import的样式,根据@import的顺序
2. 对于link和style标签的样式,根据在document中的顺序决定

负外边距

1. padding,border,margin中只要margin可以设置负值
2. 设置左边或顶部的负外边距,元素就会相应地向左或向上移动,导致元素与它前面的元素重叠
3. 如果设置右边或者底部的负外边距,并不会移动元素,而是将它后面的元素拉过来
4. margin负值减少的是外界可感知的宽高

外边距塌陷

会产生外边距塌陷的情况:

1. 两个兄弟元素之间相邻的上下外边距
2. 父子元素之间相邻的上下外边距
3. 内容为空自己上下外边距相邻

消除外边距塌陷的方法:

1. 在两个相邻的上下边距之间添加border,padding或者内联元素,使之不相邻
2. 在父子元素重叠时,除了上述方法,还可以设置父元素为BFC,使得父子不在同级BFC中

内联级格式化上下文

line box的高度为所包含的位置最高的元素的顶部和位置最低的元素的底部的距离

vertical-align决定位置

层叠上下文

层叠顺序不仅指不同的层叠上下文的顺序,同一个层叠上下文内,元素也有顺序

从垂直屏幕的轴线到用户可见

其中可分为,

根元素的背景和边框

z-index<0的元素,按z-index大小排序(内部形成新的层叠上下文)

非positioned且非形成新stack context的元素;同类型的安装html出现的顺序

postioned&&z-index为auto丨0;为z-index但形成新stack context的元素(比如opacity < 1) 按html出现顺序排序

z-index > 0 的元素,按z-index大小排序

注意: z-index只在同一个层叠上下文内比较,子元素的z-index无法超越父元素的z-index显示顺序

DPI&&PPI&&DPR

dpi:每英寸多少点

ppi:每英寸多少像素点

dpr:描述的是在未缩放状态下,设备像素和CSS像素的初始比例关系

感想

经过这一节课,我对CSS的了解更加深入了,一些之前没涉及到的知识点也在这节课学会了,感谢老师.