一、外边距折叠：指的是毗邻的两个或多个外边距 (margin) 在垂直方向会合并成一个外边距。
1、折叠的结果
①毗邻兄弟元素
- 参加折叠的margin都是正值：取其中 margin 较大的值为最终 margin 值。
- 参与折叠的 margin 都是负值：取的是其中绝对值较大的，然后，从 0 位置，负向位移。
- 参与折叠的 margin 中有正值，有负值：先取出负 margin 中绝对值中最大的，然后，和正 margin 值中最大的 margin 相加
②、父元素与子元素之间：如果块元素的 margin-top 与它的第一个子元素的margin-top 之间没有 border、padding、inline content、 clearance 来分隔，或者块元素的 margin-bottom 与它的最后一个子元素的margin-bottom 之间没有 border、padding、inline content、height、min-height、 max-height 分隔，那么外边距会塌陷。子元素多余的外边距会被父元素的外边距截断。，这时，子元素的外边距并不作用于父元素，而是作用于父元素之外的对象。
2、折叠的产生情况
- 必须是处于常规文档流（非float和绝对定位）的块级盒子,并且处于同一个BFC当中。
- 没有线盒，没有空隙，没有padding和border将他们分隔开(ps :所以解决办法中有padding或者border两种办法)
- 都属于垂直方向上相邻的外边距，可以是下面任意一种情况
- 元素的margin-top与其第一个常规文档流的子元素的margin-top
- 元素的margin-bottom与其下一个常规文档流的兄弟元素的margin-top
- height为auto的元素的margin-bottom与其最后一个常规文档流的子元素的margin-bottom
- 高度为0并且最小高度也为0，不包含常规文档流的子元素，并且自身没有建立新的BFC的元素的margin-top和margin-bottom
3、解决方法
- 在父层div加上：overflow:hidden；
- 把margin-top外边距改成padding-top内边距;
- 父元素产生边距重叠的边有不为 0 的 padding 或宽度不为 0 且 style 不为 none 的 border，父层div加：padding-top: 1px,或者 border-top:1px ;
- 设置父元素或子元素浮动（left/right）
- 设置父元素dispaly:inline-block或者display:table-cell;
- 给父元素加上绝对定位
也就是让它不在满足外边距坍塌所需条件或者处罚BFC来解决外边距坍塌问题
4、为什么会产生边距折叠设计呢？
CSS的基本模型是排版。只是前端工程师现在做得更多的是 布局 而非 文字排版，但CSS并未界定这两者的区别。而 margin 折叠是为实现文本排版的段落间距而提供的特性。所以很多时候 margin 折叠的特性会带给我们诸多疑惑。
二、标准盒模型和怪异盒子
1、怪异盒子的出现原因：当早期的浏览器Netscape 4和Explorer 4对css进行解析时，并未遵守W3C标准，这时的解析方式就被我们称之为quirks mode(怪异模式)。而到了W3C制定标准之后，这些浏览器就不能继续使用这种页面了，因而会导致大部分现有站点都不能使用。基于这个原因，浏览器才引入两种模式来处理一些遗留的站点。
2、渲染条件：解决方案就是采用doctype声明，大多数浏览器采用下面的这些判断规则
- 浏览器要使老旧的网页正常工作，但这部分网页是没有doctype声明的，所以浏览器对没有doctype声明的网页采用quirks
mode解析。 - 对于拥有doctype声明的网页，什么浏览器采用何种模式解析，这里有一张详细列表可参考：http://hsivonen.iki.fi/doctype/
- 对于拥有doctype声明的网页，这里有几条简单的规则可用于判断：
对于那些浏览器不能识别的doctype声明，浏览器采用strict mode解析 在doctype声明中，没有使用DTD声明或者使用HTML4以下（不包括HTML4）的DTD声明时，基本所有的浏览器都是使用quirks mode呈现，其他的则使用strict mode解析。可以这么说，在现有有doctype声明的网页，绝大多数是采用strict mode进行解析的。
3、怪异盒子与标准盒子的区别
标准盒模型和怪异盒子的区别在于怪异盒子的宽度和高度是内容和padding还有边框的总和。而标准盒模型的宽高则是指其内容，不包含padding和border。
