css box-sizing

定义：

box-sizing 可以使padding 和 border 的宽度，高度包含在元素的总宽度和总高度内。

没有使用box-sizing的情况：

默认情况下，一个元素的宽度和高度的计算方式如下：
width + padding + border = 元素实际宽度；
height + padding + border = 元素实际高度；
这就意味着当你给两个元素设置了同样的高度和宽度，但是效果往往会显示两个元素的宽度和高度不一致。因为他们的padding和border是不一样的。
看如下两个<div> 的示例，设置成同样的宽度和高度：

.div1{
    width：300px;
    height:100px;
    border: 1px solid blue;
}
.div2{
    width:300px;
    height:100px;
    border: 1px solid red;
    padding:50px;
}

box-sizing 可以完美的解决这个问题。

使用box-sizing 的情况：

如果设置box-sizing: border-box; 则元素的padding 和 border 都会计算到元素的总宽度和总高度中：

.div1 {
    width: 300px;
    height: 100px;
    border: 1px solid blue;
    box-sizing: border-box;
}

.div2 {
    width: 300px;
    height: 100px;
    padding: 50px;
    border: 1px solid red;
    box-sizing: border-box;
}

许多浏览器已经在许多form元素上使用box-sizing:border-box ; 但不是全部，这就是为什么有input 和 text area 即使都设置成width:100%也看起来不一样的原因。
对所有元素都是用box-sizing:border-box 是明智的：

* {
    box-sizing: border-box;
}