简述padding-box盒模型？

CSS面试题 5月前 0 42

实际上在CSS中并没有被广泛支持或公认的”padding-box”盒模型。

然而，有一个CSS的box-sizing属性值为padding-box，但这个值目前并不被所有浏览器支持（例如不被IE和Edge支持），因此在实际开发中使用比较少。

当你设置一个元素的box-sizing属性为padding-box时，这个元素的宽度和高度会包括内容区域（content area）和内边距（padding），但不包括边框（border）和外边距（margin）。

例如，如果你有一个元素的设置如下：

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

这个元素的总宽度实际上是300px（内容宽度加上左右内边距）+ 10px（左右边框）= 320px，总高度也是类似的计算方式。

但是，请记住，padding-box并不被所有浏览器支持，因此在实际开发中可能需要谨慎使用，或者寻找其他的解决方案。