一、CSS盒模型- 行级与块级
1.块级VS行级
| 块级 | 行级 |
|---|---|
| 不和其他盒子并列摆放 | 和其他行级盒子一起放在一行或拆分成多行 |
| 适合所有的盒模型属性 | 盒模型中的width和height不适用 |
2.组成元素
| 块级元素 | 行级元素 |
|---|---|
| 生成块级盒子 | 生成行级盒子，内容分散在多个行盒中 |
| body、article、div、main、section、h1-6、p、ul、li等 | span、em、strong、cite、code等 |
| display：block | display：inline |
注：
display属性：
1.block ：块级盒子；
2.inline：行级盒子；
3.inline-block：本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行
4.none:排版上完全被忽略
3.常规流
- 根元素、浮动和绝对定位的元素会脱离常规流，其他元素都在常规流之内
- 常规流中的盒子，在某种排版上下文中参与布局
3.1 行级排版上下文（inline Formatting Context --IFC）
- 只包含行级盒子的容器会创建一个IFC
- IFC内排版规则：
- 盒子在一行内水平摆放
- 一行放不下时，换行显示
- text-align决定一行内盒子的水平对齐
- vertical-align决定一个盒子子啊行内的垂直对齐
- 避开浮动元素
3.2 块级排版上下文 （Block Formatting Context --BFC）
- 某些容器会创建一个BFC：根元素；浮动、绝对定位、inline-block；Flex子项和Grid子项；overflow值不是visible的块盒；display：flow-root；
- BFC内的排版规则：
- 盒子从上到下摆放
- 垂直margin合并
- BFC内盒子的margin不会与外面的合并
- BFC不会和浮动元素重叠
3.3 Flex Box
- 一种新的排版上下文（通过display：flex可以设置）
- 可以控制子级盒子： 摆放的流向、摆放的顺序、盒子宽度和高度、水平和垂直方向的对齐、是否允许折行
- flexibility
可以设置子项的弹性：即当容器有剩余空间时，会伸展；当容器空间不足时，会收缩。
felx-grow （有剩余空间时的伸展能力）、flex-shrink（容器空间不足时收缩的能力）、flex-basis（没有伸展或收缩时的基础长度）
3.4 Grid布局
- 通过
display：grid可以使元素生成一个块级的Grid容器 - 使用 grid-template 相关属性将容器划分为网格
- 可以设置每一个子项占哪些行/列
grid line网格线
grid-area 网格区域
二、浮动：
实现图片环绕文字等功能特性。（了解即可）
三、 绝对定位
position属性
static ：默认值，非定位元素
relative ：相对自身原本位置偏移，不脱离文档流
（在常规流里面布局，相对于自己本应该在的位置进行偏移；
使用top、left、bottom、right设置偏移长度；流内其他元素当它没有偏移一样布局）
absolute ：绝对定位，相对非static祖先元素定位
（脱离常规流；相对于最近的非static祖先定位；不会对流内元素布局造成影响）
fixed ：相对于视口绝对定位
自我感悟：
- 保持好奇，实践出真知，一定要自己去敲代码实现理解
- 勇于迈出尝试的第一步
注：进一步学习可以充分利用MDN和W3C CSS规范并持续关注新出现的CSS新特性
