文档流

文档里面元素流动的方向。什么类型的元素只和display:inline/block/inline-block有关，可以自己设定的。

块级元素（block）

1. 从上到下各占一行
2. 高： 文档流中block+inline+inline-block元素总和与设定共同决定。（文档流元素决定，脱离时候无法包住）
3. 宽度：可设定。

内联元素（inline）

1. 宽度：由内联元素宽度决定，不可设定。
2. 高度：由行高间接决定，不可设定。

3. 如果最后末尾距离不够会自己切分。

   
   c元素被切成两段

Tips： inline元素中不可加block元素。

inline-block

1. 宽度：由内联元素+inline block元素宽度决定，可设定。
2. 高度：由行高间接决定，可设定。
3. 如果最后末尾距离不够不会自己切分。 c没有被切开
4. 特殊情况
   overflow:

• hidden

• auto
  

  由浏览器定夺，如果内容被修剪，就会显示滚动条。 内联元素只在第一屏显示
  如果有inline元素，左右滚动条他只在第一屏显示。
• scroll
• visible

脱离文档流

1. position:absolute/fixed
2. 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;

2. 加个padding-top:10px;
   (都是无border的前提)