文档流
文档里面元素流动的方向。什么类型的元素只和display:inline/block/inline-block有关，可以自己设定的。
块级元素（block）
- 从上到下各占一行
- 高： 文档流中block+inline+inline-block元素总和与设定共同决定。（文档流元素决定，脱离时候无法包住）
- 宽度：可设定。
内联元素（inline）
- 宽度：由内联元素宽度决定，不可设定。
- 高度：由行高间接决定，不可设定。
-
如果最后末尾距离不够会自己切分。
c元素被切成两段
Tips： inline元素中不可加block元素。
inline-block
- 宽度：由内联元素+inline block元素宽度决定，可设定。
- 高度：由行高间接决定，可设定。
-
如果最后末尾距离不够不会自己切分。c没有被切开
- 特殊情况
overflow:
- hidden
-
auto
由浏览器定夺，如果内容被修剪，就会显示滚动条。
内联元素只在第一屏显示
如果有inline元素，左右滚动条他只在第一屏显示。 - scroll
- visible
脱离文档流
- position:absolute/fixed
- float:left;
盒模型
模型的边距
content-box
width = 内容的宽度
height = 内容的高度
border-box
width = border + padding + 内容的宽度
height = border + padding + 内容的高度
Tips：这种background是会涂到外边框为界而非内边框。
border外边距合并原则
111与222中间只有30px
两个子div中间距离只有30px，而不是30+30=60px。外边距合并只有上下会重叠，左右不会的。
要消除上下的空，只需要去掉qqq中的border即可。
要留上面的空不要下面的：
1.加个
border-top:10px green solid;
- 加个padding-top:10px;
(都是无border的前提)
