box-sizing解决自适应布局容器宽度问题

在使用box-sizing属性前先要了解一下盒模型：

  • 标准盒模型：内容宽度不包含内边距、边框、外边距
  • IE盒模型：内容宽度包含内边距、边框，但不包含外边距。

box-sizing属性的值：

  • content-box，默认值，遵从标准盒模型；
  • border-box，使用IE盒模型；
  • inherit，继承父元素的box-sizing属性值；

早期的IE盒模型为border-box，但W3C的专家们认为内容宽度不应该包含内边距和边框，所以在CSS2.1中盒模型的默认值为content-box。实践证明盒模型为border-box更容易布局，例如：

一个无序列表，使用浮动两列排列，每列宽度50%，在父元素宽度自适应的情况下，如果需要给右边的一列设置边框，那么问题就来了，设置边框后右边的一列被挤到了下面，因为父元素的宽度不够了，由于父元素的宽度不确定，我们也没办法为列表指定像素值宽度，只能使用百分比。

用一句话来说，在自适应布局的时候，标准盒模型会带来许多问题，因此，CSS3提供了box-sizing属性：

* {
	box-sizing: border-box;
}

现在，整个世界都变得美好了。

为了更好的说明box-sizing的用处，以两栏自适应布局为例：

需求是这样的，边栏的宽度固定，内容栏的宽度自适应，考虑到SEO，HTML中内容栏必须放在前面，在过去，要实现这样的浮动布局必须给内容栏额外添加一个容器，HTML如下：

<div id="wrap">
	<div id="content">
		内容区
	</div>
</div>
<div id="sidebar">
	边栏
</div>

相应的CSS为：

#wrap {
	width: 100%;
}
#sidebar {
	width: 360px;
	float: right;
	margin-left: -360px;
}
#content {
	float: left;
	margin-right: 380px;
}

之所以#content的右边边距为380而不是360，是因为我要给它们中间留一个20像素的间距。

如果你不介意额外添加的标签，那么一切都没有问题，但你也可以使用box-sizing而不需要额外添加标签：

#sidebar {
	width: 360px;
	float: right;
	margin-left: -360px;
}
#content {
	float: left;
	padding-right: 380px;
}

唯一的区别是，#content的宽度是100%，如果需要给#content设置背景色的话就有点难看了，因为#content和#sidebar实际上有360像素的重叠区域。

全民最关心的问题：box-sizing的浏览器兼容性，事实上不用太担心这个问题，虽然IE6\7不支持，但目前看来IE系列浏览器被淘汰是迟早的事了。

Typora