这篇文章回顾一下 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 属性:
main-wrapper
content
margin
padding
width
height
background-color
box-sizing