一个案例讲解 CSS 布局两个注意点

这篇文章回顾一下 CSS 基础布局中两个注意点。有如下布局：

例如我们想给 main-wrapper 内部添加上下边距，让 content 不至于紧贴盒子边缘。一种可能的方案，给 content 设置 margin：

我们添加了上下各 50px 的 margin 之后发现 content 与 main-wrapper 之间并没有出现边距，反而 main-wrapper 被顶下来了。这就是第一个问题：BFC 中的垂直外边距塌陷。在同一个 BFC 中，相邻两个盒子的上下外边距会合并（可以是并排关系，也可以是嵌套关系），因此我们给 content 设置垂直外边距，实际上会变成 main-wrapper 和 content 共同的外边距。要解决这个问题，就不要给 content 设置 margin，一种方案是给 main-wrapper 设置上下 padding：

可以看到，设置属性之后，content 与 main-wrapper 确实出现边距了，但是 main-wrapper 似乎被撑大了，这是怎么回事呢？这就是第二个问题：盒模型问题。在 CSS 布局中，有两种盒模型，标准盒模型和 IE 盒模型。标准盒模型中，设置 width 和 height 针对 content 部分，而 IE 盒模型中，设置 width 和 height 却是针对 border 部分，包括了 padding 和 content。在 Chrome 浏览器中，默认的盒模型就是标准盒模型，也就是说，我们设置的 width 和 height 只针对 content，当设置 padding 的时候，那部分并不会限制在里面，而且可以看出 padding 部分也是能展示 background-color 的（注意 margin 部分是透明的）。对此解决方案是将 main-wrapper 改为 IE 盒模型，使用 box-sizing 属性：