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系列浏览器被淘汰是迟早的事了。

个赞
扫码关注背字根

一个热爱Web开发的大男孩