根据 MDN，我已阅读 “border-box 告诉浏览器考虑您为宽度和高度指定的值中的任何边框和填充。如果将元素的宽度设置为 100 像素，这 100 像素将包括您添加的任何边框或填充，内容框将缩小以吸收额外的宽度”
但在我的例子中，我设置了两个 div 框:
<style type="text/css">
.container{
width: 300px;
height: 300px;
background: blue;
margin: auto;
}
.child{
width: 150px;
height: 150px;
background: yellow;
border: 2px solid red;
box-sizing: border-box;
padding: 200em;
}
</style>
<body>
<div class="container">
<div class="child">
<h1>test</h1>
</div>
</div>
</body>
我已经将容器 div 框设置为 300px 高度和宽度，子 div 设置为 150px 高度和宽度以及 border-box 属性，但是在我用 200em< 为子 div 框提供了一个大的填充值之后 容器框不会收缩以吸收额外的宽度。我想知道这是为什么？
最佳答案
它们是两个独立的东西。 border-box 不限制大小，只是表示最终大小包括边框和内边距。因此，如果内框有边框和内边距，并且扩展到 400px，则大小将为 400px 包括边框和内边距。
为了测试，您可以对您的 css 进行调整，无论内部大小如何，都使外部 div 为 300px:
/* add min and max. */
.container {
min-width: 300px;
min-height: 300px;
max-width: 300px;
max-height: 300px;
background: blue;
margin: auto;
}
关于css border-box 属性不适用于大填充值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46992892/