width: 100%，padding与 box-sizing

=在W3School里面的CSS box-sizing属性中，我们可以看到box-sizing的定义如下:

我们通过例子来详细地讲诉一下width:100%和padding结合起来使用可能会带来的问题及如何用box-sizing解决。
我们新建两个div, 让第二个嵌在第一个里面。

HTML代码：

<div class="firstDiv" sand>
  <div class="secondDiv">
    div2
  </div>
</div>

CSS代码：

.firstDiv
{
  width: 100px;
  height: 100px;
  background-color: red;
}

.secondDiv
{
  width: 100%;
  height: 80px; 
  background-color: yellow;
}

效果图：

接下来我们想让第二个div中的文字的左边空出20px, 即设置padding-left: 20px.

CSS代码：

.secondDiv
{
  width: 100%;
  padding-left: 20px;
  height: 80px;
  background-color: yellow;
}

效果图：

我们可以看到，设置了padding之后，第二个div的宽度也随着变化了，但是我们设置的宽度明明是100%，即应该和第一个div的宽度是一样的，这是为什么呢？这是因为我们没有设置box-sizing的值，所以它用的是默认值content-box。content-box的定义为宽度和高度分别应用到元素的内容框。所以在刚才的例子中，width:100%即100px是内容框的宽度，div实际的宽度应该加上刚才设置的padding-left的值20px, 总共为120px。正如我们看到的，第二个div的宽度比第一个还要大。

那我们怎样才能既加上padding, 又不增加宽度呢？一种方法是将div的宽度从100%改为80px，第二种就是设置box-sizing为border-box。border-box决定了为元素设定的宽度和高度是元素的边框盒的宽度和高度， 即为元素指定的任何内边距padding和边框border都将在已设定的宽度和高度内进行绘制。而第二种是比较常用的方法。

CSS代码：

.secondDiv
{
  width: 100%;
  padding-left: 20px;
  box-sizing: border-box;
  -moz-box-sizing: border-box; /* Firefox */
  -webkit-box-sizing: border-box; /* Safari */
  height: 80px;
  background-color: yellow;
}

效果图：

为了适应各个浏览器的需求，我们需要额外设置-moz-box-sizing和-webkit-box-sizing的值也为border-box。

自己动手试试吧： box-sizing Example on JSFiddle