深入CSS|青训营

79 阅读2分钟

1.选择器的优先级是由特异度来决定的

id,(伪)类,标签的数量。其中id>(伪)类>标签
    

1.png

2.继承:

在css里面某些属性会自动继承其父元素的计算值,除非显式指定一个值。
一般来说在css里面,跟文字相关的属性都是可继承的,跟模型相关的属性都是不可继承的

3.显示继承:inherit

2.png

4.初始值:

每个属性都有一个初始值:例如background-color的初始值为transparent
初始值可以使用initial关键字显式重置为初始值。例如:background-color:initial

5.css值:

inherit是继承的父元素的计算值而不是使用值

3.png

4.png

6.布局:

常规流(文档流):行级,块级,表格布局,FlexBox,Grid布局
浮动
绝对定位。

7.盒模型:

容器有指定的高度时,百分数才会生效。
块级适用所有盒模型属性,行级不适用width和height

盒模型.png

8.行级排版上下文(Inline Formatting Context):

只包含行级盒子的容器会创建一个IFC。
IFC内的排版规则:(1)盒子在一行内水平摆放(2)一行放不下时,换行显示(3text-align决定一行内盒子的水平对齐。(4vertical-align决定一个盒子在行内的垂直对齐(5)避开浮动(float)元素*

9.块级排版上下文(Block Formatting Context)

BFC排版规则:(1)盒子从上到下摆放(2)垂直margin合并(3)BFC内盒子的margin不会与外面的合并(4)BFC不会和浮动元素重叠
    

学校之前进行过多次短期实训项目,也用过很多次css。但就其样式设置的优先值,并没有讲清楚。今天上完课之后对css有了更加深入的了解,很多之前不懂的地方,也知道了原因。比如知道了选择器特异度的计算公式