一 前言
要想掌握CSS部分的内容其实并不容易，尽管你已经阅读过相当多的关于CSS的书籍，但是还是免不了去网上搜索相关的知识扩大你对CSS内容的掌握。在网络上查找最好的地方当然是CSS官网文档，不过英文版的官方文档将很大一部分人拒之门外，而中文版的博客上五花八门的只是零散又不权威，很容易将人带入歧途，浪费时间。笔者写这篇文章，摘录博客上总结的CSS知识，同时参考CSS官方文档，尽力保证其正确性。希望能节省开发者查阅的时间，提高效率。如有错误的地方，还请大家指出～一起学习，共同进步。
二 正文
1.DOM脱离文档流
脱离文档流的元素都是块级元素。
参考资料：
【1】https://www.cnblogs.com/chuaW...
（1）什么是文档流
指语言文本从左到右，从上到下显示，这是传统HTML文档的文本布局。
脱离文档流即是元素打乱了这个排列，或是从排版中拿走。
（2）什么情况下会脱离文档流
浮动(float)、绝对定位(absolute)、固定定位(fixed)三种方式定位会脱离文档流。
(3)浮动
浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素。
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
浮动元素脱离文档流：
1.没有实际高度,浮动会导致父元素高度坍塌
2.位置属性（left/top/right/bottom）是没有用的
需要注意：
浮动有点像玩俄罗斯方块。向左浮动，方块从右往左滑过来，如果某一行空间不够（基于父容器的宽度），那么这个块会沿着最右边的块的下边沿水平划过来，最后看卡到哪里就停止。
left4在第一行left3后面宽度不够，换行成第二行。在left2后面宽度不够，只能在left1后面。right1自然是从第二行开始查找位置，很幸运第二行现在唯一的元素#left4右面空间足够，放置即可。right2在第二行中没有足够的位置，换行成第三行，找到空余位置插入。
（4）定位
关于定位的详细讲解请看这里：https://segmentfault.com/a/11...
//css中給元素设置position属性
el{
position: absolute | fixed | relative | static | inherit
}详解：
position的值为absolute、fixed的元素脱离文档流，static、relative没有脱离文档流。
1.static定位不脱离文档流，设置left/top/right/bottom没有作用，对margin/padding敏感。
2.对于外边距margin:块级元素的垂直相邻外边距会合并;
而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并；
3.浮动元素的外边距也不会合并。允许指定负的外边距值。(这里可以参考BFC部分)
对于浮动与定位的位置优先级：
(fixed == absolute) > float > relative > static。理解为同时设置了position:absolute和float:right。忽略float:right。 堆叠优先级：
定位元素z-index>=0时为(fixed == absolute == relative) > static，z-index < 0时(fixed == absolute == relative) < static。理解为兄弟元素一个设置了position：relative,另一个设置了position:static，当relative元素z-index为>=0时，无论static元素设置多少都在relative下面。如果relative设置z-index<0,则论static取什么值relative都会在static下面。
定位元素z-index>=0时(fixed == absolute == relative) > float，z-index < 0时(fixed == absolute == relative) < float。理解为兄弟元素一个设置了position：relative,另一个设置了float:left，当relative元素z-index为>=0时，无论float元素设置多少都在relative下面。如果relative设置z-index<0,则无论float的z-index设置多少relative都会在float下面。
float > static始终成立。因为z-index只有在定位元素上才起作用，定位元素包括fixed、absolute、relative。
fixed == absolute == relative，比较堆叠顺序直接比较z-index大小即可。
2.垂直边距合并
参考资料：http://www.w3school.com.cn/cs...
当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
2.什么情况下会发垂直边距合并？
1）只针对块级元素
2）正常文档流
注意：合并行为只适用于外边距，如果元素有内边距和边框，它们绝对不会合并。
情况1:同一层级垂直方向上盒子的相遇
请注意，两个 div 之间的外边距是 20px，而不是 30px（20px + 10px）。
（注意：图片中的“内容区域”应该是包括content和padding）
demo1
情况2：存在嵌套关系
父子节点都是没有脱离文档的两种定位（static、relative）的外边距（margin）会合并，显示效果以最大的那个外边距为准。
没有给父元素设置内边距或者有效的边框的情况下：
注释：请注意，如果不设置 div 的内边距和边框，那么内部 div 的上外边距将与外部 div 的上外边距合并（叠加）。
为父元素例子中的middle元素增加一个border-top或者padding-top即可
边距合并实际例子：
middlenormal
big
container
