理解CSS(下) | 青训营笔记
这是我参加【第四届青训营】笔记创作活动的第4天
前面我们已经对css有了一定的了解，下面我们就来更加深入地认识css。
(一)选择器优先级
不同的选择器有不同的权重值，权重值的大小构成了选择器的优先级，权重越大优先级越高，同一行的选择器权重，权重大的样式会覆盖权重低的样式。
- ! important - - - infinity
- 行间样式 - - - 1000
- id 选择器 - - - 100
- 属性、伪类、类名选择器 - - - 10
- 标签选择器 - - - 1
- 通配符选择器 - - - 0
注：权重值是256进制，不是10进制
(二)继承
某些属性会自动继承其父元素的计算值，除非显式指定一个值
显式继承
初始值
CSS中，每个属性都有一个初始值:
background-color的初始值为transparend；
margin-left的初始值为0；
可以使用initial关键字显式重置为初始值：
background-color:initial
(三)CSS求值过程
(四)布局
布局是确定内容的大小和位置的算法。依据元素、容器、兄弟节点和内容等信息来计算。网页布局的本质就是用css来摆放盒子，把盒子摆放到相应的位置。
布局相关技术：常规流、浮动、绝对定位。
常规流
最基本的布局方式，包括行级、块级、表格布局、FlexBox、Grid布局。
常见属性
-
width
指定content、box宽度；取值为长度、百分数、auto
auto由浏览器根据其他属性确定；百分数相对于容器的content box宽度。
-
height
指定content、box高度；取值为长度、百分数、auto
auto取值由内容计算得来；百分数相对于容器的content box高度；容器有指定的高度时，百分数才生效。
-
padding
指定元素四个方向的内边距；百分数相对于容器宽度
-
border
指定容器边框样式、粗细和颜色
三种属性 四个方向
-
margin
指定元素四个方向的外边距；取值可以是长度、百分数、auto
百分数相对于容器宽度。使用margin:auto水平居中
-
overlow
-
display
-
块级元素与行级元素
根元素、浮动和绝对定位会脱离常规流；其他元素都在常规流内；常规流中的盒子，在某种排版上下文中参与布局。
- 行级排版上下文
- 块级排版上下文
- BFC内的排版规则
-
FlexBox
-
justify-content
-
align-items
-
align-self
-
order
-
Flexibility
- Grid布局
浮动
有很多布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式。
属性
- float:none;
- float:left;
- float:right;
定位
相对定位
绝对定位
学习CSS的几点建议
1.充分利用MDN和W3C CSS规范
2.保持好奇心，善用浏览器的开发工具
3.持续学习，CSS新特性还在不断出现
