第二节理解CSS | 青训营笔记这是我参与「第四届青训营」笔记创作活动的的第3天第二节理解CSS：选择器特异度

这是我参与「第四届青训营」笔记创作活动的的第3天

选择器的特异度（Specificity）

特异性层次

每个选择器在特异性层次结构中都有其位置。以下四种类别定义了选择器的特异性级别：

行内样式 - 行内（内联）样式直接附加到要设置样式的元素。实例：

<h1 style="color: #ffffff;">

ID - ID 是页面元素的唯一标识符，例如 #navbar。
类、属性和伪类 - 此类别包括 .classes、[attributes] 和伪类，例如：:hover、:focus 等。
元素和伪元素 - 此类别包括元素名称和伪元素，比如 h1、div、:before 和 :after。

特异性计算

内联样式 + 1,0,0,0
id选择器 + 0,1,0,0
类和伪类选择器 + 0,0,1,0
元素选择器 + 0,0,0,1
通配选择器 + 0,0,0,0
继承的样式 + 没有优先级

继承

某些属性会自动继承其父元素的计算值，除非显式指定一个值

初始值

CSS 中，每个属性都有一个初始值
- background-color 的初始值为 transparent
- margin-left 的初始值为 0
可以使用 initial 关键字显式重置为初始值
- background-color: initial

CSS求值过程

布局（layout）

布局是什么
- 确定内容的大小和位置的算法
- 依据元素、容器、兄弟节点和内容等信息来计算
相关技术
- 常规流
  - 行级
  - 块级
  - 表格布局
  - FlexBox
  - Grid布局
- 浮动
- 绝对定位

盒模型

width
- 指定 content box 宽度
- 取值为长度、百分数、auto
- auto 由浏览器根据其它属性确定
- 百分数相对于容器的 content box 宽度
元素总宽度 = 宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距
height
- 指定 content box 高度
- 取值为长度、百分数、auto
- auto 取值由内容计算得来
- 百分数相对于容器的 content box 高度
- 容器有指定的高度时，百分数才生效
元素总高度 = 高度 + 上内边距 + 下内边距 + 上边框 + 下边框 + 上外边距 + 下外边距
padding
- 指定元素四个方向的内边距
- 百分数相对于容器宽度
border
- 指定容器边框样式、粗细和颜色
- 三种属性
  - border-width
  - border-style
  - border-color
margin
- 指定元素四个方向的外边距
- 取值可以是长度、百分数、auto
- 百分数相对于容器宽度

box-sizing: border-box

CSS box-sizing 属性允许我们在元素的总宽度和高度中包括内边距（填充）和边框。

如果在元素上设置了 box-sizing: border-box;，则宽度和高度会包括内边距和边框

溢出

overflow 属性指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条。

overflow 属性可设置以下值：

visible - 默认。溢出没有被剪裁。内容在元素框外渲染
hidden - 溢出被剪裁，其余内容将不可见
scroll - 溢出被剪裁，同时添加滚动条以查看其余内容
auto - 与 scroll 类似，但仅在必要时添加滚动条

块级VS行级

Block Level Box	Inline Level Box
不和其它盒子并列摆放	和其它行级盒子一起放在一行或拆开成多行
适用所有的盒模型属性	盒模型中的width、height不适用

块级元素	行级元素
生成块级盒子	- 生成行级盒子 - 内容分散在多个行盒 (line box) 中
body、article、div、main、section、h1-6、p、ul、li 等	span、em、strong、cite、code 等
display: block	display: inline

display

属性
block	块级盒子
inline	行级盒子
inline-block	本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行
none	排版时完全被忽略

常规流（Normal Flow）

根元素、浮动和绝对定位的元素会脱离常规流
其它元素都在常规流之内（in-flow）
常规流中的盒子，在某种排版上下文中参与布局

行级排版上下文

Inline Formatting Context (IFC)
只包含行级盒子的容器会创建一个IFC
IFC 内的排版规则
- 盒子在一行内水平摆放
- 一行放不下时，换行显示
- text-align 决定一行内盒子的水平对齐
- vertical-align 决定一个盒子在行内的垂直对齐
- 避开浮动(float)元素

块级排版上下文

Block Formatting Context (BFC)
某些容器会创建一个BFC
- 根元素
- 浮动、绝对定位、inline-block
- Flex子项和Grid子项
- overflow 值不是 visible 的块盒
- display: flow-root;
BFC内的排版规则
- 盒子从上到下摆放
- 垂直 margin 合并
- BFC 内盒子的 margin 不会与外面的合并
- BFC 不会和浮动元素重叠

Flex Box

可以控制子级盒子的：
- 摆放的流向 ( → ← ↑ ↓ )
- 摆放顺序
- 盒子宽度和高度
- 水平和垂直方向的对齐
- 是否允许折行
属性：
- flex-direction属性定义容器要在哪个方向上堆叠 flex 项目
- flex-wrap属性规定是否应该对 flex 项目换行
  - wrap 值规定 flex 项目将在必要时进行换行
  - nowrap 值规定将不对 flex 项目换行（默认）
  - wrap-reverse 值规定如有必要，弹性项目将以相反的顺序换行
- flex-flow属性是用于同时设置 flex-direction 和 flex-wrap 属性的简写属性
```
 .flex-container {
 display: flex;
 flex-flow: row wrap;
 }
```
- justify-content属性用于对齐 flex 项目
- align-items属性用于垂直对齐 flex 项目
- align-content属性用于对齐弹性线
- align-self 属性规定弹性容器内所选项目的对齐方式
- order 属性规定 flex 项目的顺序
Flexibility
- 可以设置子项的弹性：当容器有剩余空间时，会伸展；容器空间不够时，会收缩。
- flex-grow 有剩余空间时的伸展能力
- flex-shrink 容器空间不足时收缩的能力
- flex-basis 没有伸展或收缩时的基础长度
- flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性 |flex | | | --------------- | ----------------------------------------------- | |flex: 1 | flex-grow: 1 | | flex: 100px | flex-basis: 100px | | flex: 2 1 | flex-grow: 2; flex-shrink: 1 | | flex: 1 100px | flex-grow: 1; flex-basis: 100px | | flex: 2 0 100px | flex-grow: 2; flex-shrink: 0; flex-basis: 100px | | flex: auto | flex: 1 1 auto | | flex: none | flex: 0 0 auto