【css3】【box-sizing】

平常我们使用width和height属性定义盒子div的宽或者高时(例如<div style="width: 300px"></div>)，只是在设置里面内容的宽高，不是div本身的宽高，具体体现：

div {
  padding: 0 10px;
  width: 300px;
  border: 1px solid red;
}
/* 此时div的宽是 width + padding + border = (300 + 20 + 2)px */

如果我们想让盒子div的宽为300px，我们需要计算：300px - 22px = 278px
改为：

div {
  padding: 0 10px;
  width: 278px;
  border: 1px solid red;
}
/* 此时div的宽是 width + padding + border = (278 + 20 + 2)px */

不过这种情况下，box-sizing: border-box可以免除计算，让内容宽度自动更具padding和border的设定值进行增减：

div {
  box-sizing: border-box;
  padding: 0 10px;
  width: 300px;
  border: 1px solid red;
}
/* div盒子的宽度就是300px，内容会是278px */
/* 建议设置overflow: auto 因为padding值过大会使内容超出div盒子外 */