CSS盒子模型 box-sizing

box-sizing 属性

box-sizing 定义元素宽度和高度的计算方式：它们是否应包含内边距（padding）和边框。

box-sizing属性的俩个值：content-box（默认），border-box

content-box（默认）

默认情况下，width和height从content算起，不包含边框border和内边距padding。

元素的宽度和高度是这样计算的：

• width + padding + border = 元素的实际宽度
• height + padding + border = 元素的实际高度

这意味着：当您设置元素的宽度/高度时，该元素通常看起来比您设置的更大（因为元素的边框和内边距已被添加到元素的指定宽度/高度中）。

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

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

这两个盒子的width都为300px，height都为100px，但是因为div2有50px的内边距padding，默认情况下，div2的实际宽、高度在width、height的基础上还要加上padding值，div2看上去就会比div1大很多。

border-box

border-box 属性允许我们在元素的总宽度和高度中包括内边距和边框，也就是width和height从border算起，包含边框border和内边距padding。

如果在元素上设置了 box-sizing: border-box;，则宽度和高度会包括内边距和边框：也就是说添加内边距和边框，不会改变元素的宽度和高度。

.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;
}

这里指定了box-sizing:border-box ，即使div2添加了padding，两个盒子也是一样大的。