CSS布局|青训营笔记
这是我参与「第四届青训营」笔记创作活动的的第3天。
盒模型
width
- 指定content box宽度
- 取值为长度、百分数、auto
- auto为浏览器根据其他属性确定
- 百分数相对于容器的content box宽度
height
- 指定content box高度
- 取值为长度、百分数、auto
- auto取值由内容计算得来
- 百分数相对于容器的content box高度
- 容器由指定的高度时，百分数才生效
padding
- 指定元素四个方向的内边距
- 百分数相对于容器的宽度
border
- 指定容器边框样式、粗细和颜色
三种属性：
- border-width
- boder-style
- boder-color
四个方向：
- border-top
- border-right
- boder-bottom
- boder-left
margin
- 指定元素四个方向的外边距
- 取值可以是长度、百分数、auto
- 百分数相对于容器宽度
margin collapse
在垂直方向上，两个margin的宽度会合并为两者中的最大值。
box-sizing：border-box
border-box的长宽实际指的是包含border和padding的整体。
overflow
设置超出内容的显示方式。
visible：显示hidden：隐藏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等 |
| diaplay：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
一种新的排版上下文，它可以控制子级盒子的：
- 摆放的流向（\rightarrow \leftarrow \uparrow \downarrow）
- 摆放顺序
- 盒子宽度和高度
- 水平和垂直方向的对齐
- 是否允许折行
主轴与侧轴
justify-content
align-items
Flexibility
可以设置子项的弹性：当容器有剩余空间时，会伸展；容器空间不够时，会收缩。
flex-grow有剩余空间时的伸展能力
flex-shrink有容器空间不足时是收缩能力
flex-basis没有伸展或收缩时的基础长度
Grid
display:grid使元素生成一个块级的Grid容器
使用grid-template相关属性将容器划分为网格
设置每一个子项占哪些行/列
