这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
课堂笔记
课程重点内容：
- 块级元素
- 行级元素
- FlexBox布局
- Grid布局
- 浮动
- 定位
块级元素：
不和其他盒子并列摆放，单独占据一行，适用所有的盒模型属性
具体案例：
常见的块级元素有body、article、div、main、section、h1-6、p、ul、li等 转换方式display:block
行级元素：
和其他行级盒子一起放在一行或拆开成多行，盒模型中的width、height不适用
具体案例：
常见的行级元素有span、em、strong、cite、code等
转换方式display:inline
display属性：
| block | 块级盒子 |
|---|---|
| inline | 行级盒子 |
| inline-block | 本身是行级，可以放在行盒子中，设置宽高，不会被拆散成多行 |
| none | 排版时完全被忽略 |
FlexBox布局：
- 利用轴来控制子级盒子的：
- 摆放流向（上下左右）
- 摆放顺序
- 盒子宽度和高度
- 水平和垂直方向的对齐
- 是否允许拆行
Grid布局：
通过划分网格控制布局，先划分好网格大小，再给元素指定网格的坐标。
float浮动：
float布局方式已被弃用，现在回归本质用法，用于文字环绕图片
具体案例：
通过给img元素设置浮动，让p元素中的文字环绕图片
定位position属性：
| static | 默认值，非定位元素 |
|---|---|
| relative | 相对自身原本位置偏移，不脱离文档流 |
| absolute | 绝对定位，相对非static祖先元素定位 |
| fixed | 相对于视口绝对定位 |
具体案例：
总结：
块级元素和行级元素决定了不同元素的摆放规则，根据行级和块级元素css衍生出四种布局模式:FlexBox布局、grid布局、浮动布局、定位布局。目前市场上流行FlexBox布局和grid布局，这两种布局模式已经能解决大部分的布局问题，因而浮动布局回归文字环绕图片的本质，定位布局则在一些特定场合下使用，如：轮播图等。
