1. 文档流 Normal Flow
文档流动方向
- inline元素从左到右，到达最右边才会换行。
- block元素从上到下，每一个都另起一行。
- inline-block也是从左到右。
宽度
- inline宽度为内部inline元素的和，不能用width指定。
- block默认自动计算宽度，可用width指定。
- inline-block结合前两者特点，可用width。
高度
- inline高度由line-height间接确定，跟height无关。
- block高度由内部文档流元素决定，可以设height。
- inline-block跟block类似，可以设置height。
所有元素都可以是内联的也可以是块级的，只需要给他一个样式。
display: inline/block/inline-block;
不要在display: inline;的元素里加上display: block;的元素。
div宽度的默认不是100%，是auto---能有多宽占多宽。
大大大大大部分时候不要写宽度100%
overflow 溢出
当内容的宽度或高度大于容器的，会发生溢出，可用overflow来设置是否显示滚动条
| auto | 灵活设置 |
|---|---|
| scroll | 永远显示 |
| hidden | 直接隐藏溢出部分 |
| visible | 直接显示溢出部分 |
如果有滚动条，内联元素默认只在第一屏里显示，后面留空。
如果div里什么都没有，高度默认是0。
overflow可以分为 overflow-x 和 overflow-y。
脱离文档流
- float
- position: absolute/fixed;
2. 两种盒模型
content-box内容盒：内容就是盒子的边界
content-box width = 内容宽度
border-box 边框盒：边框才是盒子的边界
border-box width = 内容宽度 + padding + border
margin合并
块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距，其大小为单个边距的最大值(或如果它们相等，则仅为其中一个)，这种行为称为边距折叠。——MDN
发生margin合并的三种情况
- 父子margin合并：父元素与其第一个以及最后一个子元素。
- 兄弟margin合并：相邻的兄弟元素。
- 空块元素：一个块元素完全没有设定border、paddng、height、min-height 、max-height 、内容设定为inline或是加上clear-fix的时候。
如何阻止合并
- 父元素用
overflow: hidden; - 父元素padding-top/bottom
- 父元素border-top/bottom
- 父子合并用
display: flex;，不知道为什么 - 兄弟合并可以用inline-block消除
