CSS | box-sizing 属性

在 CSS 盒模型中，元素的尺寸是由元素的内容、内边距和边框区域组成的。box-sizing 属性用于设置这些尺寸计算方式。

语法

box-sizing: content-box | border-box | inherit;

取值

• content-box：默认值，宽度和高度仅包括元素内容的宽度和高度。
• border-box：元素的宽度和高度包括其内容、内边距和边框宽度，即使设定了宽度和高度，仍然不会改变元素的实际尺寸。
• inherit：继承父元素的 box-sizing 属性的值。

示例

content-box

div {
  box-sizing: content-box;
  width: 300px;
  height: 200px;
  padding: 20px;
  border: 5px solid black;
}

元素的实际尺寸为宽度 300px + 左右两侧内边距 20px + 左右两侧边框宽度 5px = 350px，高度同理。即使宽度和高度设定为 300px 和 200px，元素的实际尺寸也为 350px x 250px。

border-box

div {
  box-sizing: border-box;
  width: 300px;
  height: 200px;
  padding: 20px;
  border: 5px solid black;
}

元素的实际尺寸为宽度 300px，高度 200px。元素的内容区宽度为 260px，高度为 160px。内边距和边框宽度都包括在内了。

总结

box-sizing 属性可以帮助开发者更好的控制元素的尺寸。默认的内容盒模型容易造成开发者困惑，而边框盒模型则更符合实际需求。虽然 IE6/7 不支持该属性，但可以通过 hack 的方式解决。