这是我参与「第四届青训营」笔记创作活动的的第5天
CSS布局（Layout）是什么？
- 根据内容的大小和位置的算法
- 依据父容器或主窗口中的元素、容器、兄弟节点和内容等信息，并结合内容的大小和位置，来计算其布局和位置
- 相关技术：
- 正常流：行级、块级、Table布局、Flex布局、Grid布局
- 浮动
- 绝对定位
正常流 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 的块盒
- BFC 内的排版规则
- 盒⼦从上到下摆放
- 垂直 margin 合并
- BFC 内盒⼦的margin不会与外⾯的合并
- BFC 不会和浮动元素重叠
浮动布局
- 浮动元素脱离常规流，漂浮在容器左边或右边
- 浮动元素贴着容器边缘或另外的浮动元素
- 浮动元素不会影响常规流⾥⾯的块级盒⼦
- 浮动元素后⾯的⾏盒会变短以避开浮动元素
将浮动的影响控制在容器内
- Block Formatting Context
- BFC 的⾼度包含浮动元素
- BFC 不会和浮动元素上下重叠
- 创建 BFC
- overflow ⾮ visible
- float、inline-block、绝对定位
position 属性
| 使用例子 | |||
|---|---|---|---|
| static | 默认值，⾮定位元素 | ||
| relative | 相对⾃⾝原本位置偏移，不脱离⽂档流 | 在常规流⾥⾯布局、相对于⾃⼰本应该在的位置进⾏偏移、使⽤ top、left、bottom、right 设置偏移长度、流内其它元素当它没有偏移⼀样布局 | |
| absolute | 绝对定位，相对⾮ static 祖先元素定位 | 脱离常规流、相对于最近的⾮ static 祖先定位、不会对流内元素布局造成影响 | |
| fixed | 相对于视⼝绝对定位 | 相对于 Viewport 定位、不会随⾯滚动发⽣位置变化 | header、footer |
