CSS中box-sizing的使用

在进行网页布局的过程中经常会遇到一个问题，即一个DIV包裹着另一个DIV，里面的DIV宽度设为100%以后，再为它设置padding，里面的DIV会跑出来。如下图：

外层DIV为wrap，内层DIV为content，CSS代码：

<pre name="code" class="css">#wrap {width: 500px;height: 300px; background-color: #333;}
#content{width: 100%; padding: 0 50px;background-color: #999;word-break:break-all}

可以看到内层DIV溢出了。

此时我们当然可以对外层DIV设置overflow:hidden，但是内层的padding就无法达到其应有的效果了，如下图：

此处CSS代码除了加了一句overflow:hidden以外没有变化，就不打出来了。可以看到此时内层DIV的右内边距是不起作用的，因为它被隐藏住了。

通过查阅资料发现了还有box-sizing这个属性。它有三个值，从W3C上找到它们的描述：

content-box：这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。border-box： 为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。inherit 规定应从父元素继承 box-sizing 属性的值。

所以说我们之前内部DIV溢出的情况，也就是应为它是在宽度和高度之外绘制元素的内边距和边框。我们将box-sizing设为border-box之后它就变成了下图的样子：

可见此时我们的内边距都起作用了。

附上代码：

#wrap {width: 500px;height: 300px; background-color: #333;}
#content{width: 100%; padding: 0 50px;background-color: #999;box-sizing: border-box; word-break:break-all}

这样我们终于就得到想要的效果了。