不让padding影响元素的宽度

CSS3 新增了 box-sizing 属性。

以前，如果指定 div 的宽度为

div {
        width: 100px;
        height: 100px;
        padding: 10px;
    }

则包含 padding，div 的实际宽度为 120px。

有时我们不希望 padding 影响到 div 的实际宽度。以前只能手动计算 width，从 CSS3 开始可以通过 box-sizing 来做到这一点。

div {
        box-sizing: border-box;
        width: 100px;
        height: 100px;
        padding: 10px;
}

则 div 的实际宽度为 100px。