盒模型踩坑记 ——margin 塌陷那点事儿

本以为 CSS 入门很简单，直到我遇到了盒模型和 margin 塌陷，才发现 CSS 的水比想象中深。
每个 HTML 元素都是一个盒子，由内容区、内边距、边框、外边距四部分组成。标准盒模型下，width 只包含内容区；而 IE 盒模型的 width 包含了内容 + 内边距 + 边框。
css
/* 标准盒模型（默认） /
.box-standard {
box-sizing: content-box;
width: 200px;
padding: 20px;
border: 10px solid #333;
/ 实际总宽度 = 200 + 202 + 102 = 260px */
}

/* IE盒模型（推荐） /
.box-border {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 10px solid #333;
/ 实际总宽度 = 200px，内容区自动压缩 /
}
刚开始没搞清楚区别，设置了 width 再加 padding，元素总宽度总是超出预期，调了半天都不对。后来用box-sizing: border-box统一改成 IE 盒模型，世界瞬间清爽了。
更头疼的是 margin 塌陷。两个垂直相邻的块级元素，上下 margin 会发生合并，取较大的值。
css
.top { margin-bottom: 20px; }
.bottom { margin-top: 30px; }
/ 实际两个元素之间的间距是30px，不是50px /
我给上面的盒子设了margin-bottom: 20px，下面的盒子设了margin-top: 30px，本以为间距是 50px，结果只有 30px。查了资料才知道这是 CSS 的规范设计，不是 bug。
解决方法也有不少：给父元素加 overflow、用 padding 替代 margin、设置浮动或者 flex 布局等等。
css
/ 解决方案：给父元素触发BFC */
.parent {
overflow: hidden;
}
虽然踩了坑，但搞懂原理之后，反而对 CSS 的布局规则有了更深的理解