Jul. 26th 笔记 - 理解CSS (2)
这是我参与「第四届青训营 」笔记创作活动的的第3天
选择器的特异度（Specificity）
如果一个元素使用了多个选择器，那么这个元素会由哪一个选择器来控制便成了一个问题，所以，我们需要指定选择器优先级参数来确定相关因素。
- 内联：1000
- id: 100
- 类、伪类： 10
- 元素、伪元素：1
- 通配：0
举一个栗子：
第一个例子的特异度为100+2*10+2*1=122，第二个例子的特异度为2*10+2*1=22。
继承 & 初始值
某些属性会自动继承父元素的计算值，除非显性指定一个值。（类似于OOP）
相似的，每一个属性也都具有一个初始值，可以使用inital来恢复初始值。
CSS的求值流程
布局
- 确定内容大小和位置的算法
- 根据元素、容器 、兄弟节点和内容来计算
相关技术：
- 常规流
- 行级
- 块级
- 表格布局
- FlexBox
- Grid
- 浮动
- 绝对定位
块级元素
- 独占一行
- 相关参数： width, height, margin（外边距，相对容器宽度）, padding（内边框，顺时针，相对容器宽度）
- 例：div, p, h, ul, ol 等
行级元素
- 可以与其他行级共处一行或拆行
- width,height不适用
- 例: span, em, syrong, cite, code 等
- inline-box 不会被拆成多行
常规流
常规流，即根元素、浮动、绝对定位之外的元素参加的流。
行级排版 - Inline Formatting Context (IFC)
只包含行级元素的容器会创建一个IFC。IFC排版规则：
- 盒子在一行内水平摆放
- 一行放不下，换行
- 避开浮动元素
块级排版 - Block Formatting Context (BFC)
- 根元素、浮动、绝对定位、inline-block
- Flex、Grid 子项
- overflow 非 visible
- display: flow-root
Flex
- CSS Flexible 布局允许容器内的响应式元素根据屏幕或设备大小自动排列
- 可以控制各种属性：流向、顺序等
Grid
- CSS Grid可以更轻松、更一致地跨浏览器创建复杂的响应式网页设计网格布局
