CSS3 盒子模型

CSS3 中可以通过 box-sizing 来指定盒子模型。

在之前的盒子模型中，如果我们为盒子设置了 width、padding、border，那么盒子的实际宽度为 width + padding-left + padding-right + border-left + border-right。

在 CSS3 中，如果为盒子设置：

  box-sizing: border-box;

那么padding 和 border 就不会撑大盒子，我们设置的 width 就会是盒子的实际宽度。

box-sizing 的值还可以为 content-box，也就是以前默认的会撑大盒子的样式。