文档流：文档中元素的流动方向，从上到下，从左到右

1. 流动方向

• inline元素从左到右，到达最右边才会换行（到最后可能被分成两行）；
• block元素从上到下，每一个都另起一行；
• inline-block也是另起一行(不会被分成两行)；

2. 宽度

• inline不接受宽度，不能被width指定，里面不能加block元素；inline元素宽度是由它内容总和决定的；
• block宽度默认自动计算宽度，不是100%；（永远不要写width:100%）；
• inline-block结合两者特点，不写width的话默认和inline一样由内容决定宽度，但同时也可以设置width；

3. 高度

• inline元素的高度由line-height间接确定，跟height无关；
• block高度由内部文档流决定，可以设height;如果div里什么都没有，div高度就是0；
• inline-block跟block类似，可以设置height；

overflow溢出

当内容大于容器

• 当内容的宽度或高度大于容器，会溢出
• 可用overflow来设置是否显示滚动条
• auto是灵活设置
• scroll是永远显示
• hidden是直接隐藏溢出部分
• visible是直接显示溢出部分
• overflow可以分为overflow-x和overflow-y

脱离文档流

1. float
2. position：absolute/fixed

盒模型

image.png
image.png
image.png

margin合并

• 哪些情况会合并

1. 父子 margin合并
2. 兄弟 margin合并

• 如何阻止合并

1. 父子合并用 padding/border 挡住
2. 父子合并用 overflow:hidden 挡住
3. 父子合并用 display:flex 挡住
4. 兄弟合并是复合预期的
5. 兄弟合并可以用 inline-blcok 消除

         display:inline-block;
          width:100%;
    }

6. 如何让父元素和第一个儿子外边距不合并(即1、2点)

• 父元素加padding
• 父元素加border
• 父元素加overflow:hidden

7. 总之要一条一条死记