布局是什么

image.png

布局的相关技术

定位模式

image.png
image.png

常规流 // 也叫文档流

image.png

行级排版上下文

image.png

块级排版上下文

image.png
BFC就是流的容器，一个绝对定位的元素会脱离文档流，但是绝对定位元素内的内容该怎吗布局呢？还是需要按照流的方式去摆放，所以绝对定位元素就会创建一个BFC,由一个新的流来布局里面的内容

BFC的排版规则

image.png

Flexible Box

Flexible Box是什么

image.png

怎吗使用Flexible

image.png

示例

image.png

Gird

gird 与 flex 的区别

flex是单个方向上的布局不是横向摆放就是竖向摆放，gird是一个二维的布局方式将容器从横向到纵向划分成一些网格，把子元素放在这个子元素里
image.png

怎吗使用

image.png

示例

image.png

表格

浮动流

定位