使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题

当我们给一个div设置了内边距时，它的宽高会被内边距撑开，进而影响到整个布局。为了解决这一问题，我们可以使用CSS3中的box-sizing属性。

什么是box-sizing属性？

box-sizing属性是CSS3中新增的一个属性，可以控制元素的盒模型的解析方式。默认情况下，元素的宽度和高度只包含内容区域的宽度和高度，元素的内边距和边框会增加额外的宽度和高度。

通过设置box-sizing属性的属性值，可以控制元素的宽度和高度是否包含内边距和边框的宽度。

box-sizing属性有以下三个属性值：

• content-box（默认值）：元素的宽度和高度只包含内容区域的宽度和高度。
• border-box：元素的宽度和高度包含内容区域、内边距和边框的宽度和高度。
• padding-box：元素的宽度和高度包含内容区域和内边距的宽度和高度，但是不包含边框的宽度和高度。

使用box-sizing属性解决div宽高被内边距撑开的问题

为了解决div宽高被内边距撑开的问题，我们可以将box-sizing属性设置为border-box。这样，元素的宽度和高度就会包含内容区域、内边距和边框的宽度和高度，这样就不会被内边距撑开了。

示例1：使用border-box解决div宽高被内边距撑开的问题

.box {
  box-sizing: border-box;
  width: 200px;
  height: 100px;
  padding: 10px;
  border: 1px solid #000;
}

上述示例中，box-sizing属性被设置为border-box，这样div元素的宽度和高度就包含内容区域、内边距和边框的宽度和高度了。div元素的宽度为200px，高度为100px，内边距为10px，边框为1px，但是整个div元素的宽度和高度仍然是200x100。

示例2：使用padding-box无法解决div宽高被内边距撑开的问题

.box {
  box-sizing: padding-box;
  width: 200px;
  height: 100px;
  padding: 10px;
  border: 1px solid #000;
}

上述示例中，box-sizing属性被设置为padding-box，这样div元素的宽度和高度就包含内容区域和内边距的宽度和高度了，但是不包含边框的宽度和高度。div元素的宽度为200px，高度为100px，内边距为10px，边框为1px，由于box-sizing设置为padding-box，因此div元素的宽度为200 + 10 x 2 = 220px，高度为100 + 10 x 2 = 120px。

结束语

box-sizing属性是CSS3中非常有用的属性，可以帮助我们解决元素宽高被内边距撑开的问题。当我们需要设置div元素的内边距和边框的时候，建议将box-sizing属性设置为border-box，这样可以避免宽高被撑开。