这是否适用于每个元素？
示例'A'：
*
{
box-sizing: border-box;
}
我认为盒大小不继承吗？
这与重设大小框有关：
示例'B'：
*, *::before, *::after
{
box-sizing: inherit;
}
html
{
box-sizing: border-box;
}
两个示例的效果相同吗？
我认为盒大小不继承吗？
不，不是。您可以检查the specification，您将看到继承为NO。在示例A中，您仅使用通用选择器选择所有元素并将box-sizing:border-box应用于它们，但是它不针对伪元素，因此默认情况下不会设置box-sizing:border-box。
两个示例的效果相同吗？
不，他们不会。即使我们认为这是应用于文档的唯一CSS，示例B也会以伪元素为目标来继承box-sizing，并且如果我们遵循父子结构，则从box-sizing:border-box开始它们在逻辑上也会获得html具有box-sizing:border-box。
[另一个区别是，与在示例A中显式设置值不同，使用inherit将考虑父样式。在示例A中，如果要覆盖由设置的一个，则必须为每个元素更改box-sizing。您的代码，而在示例B中，更改元素或任何祖先上的box-sizing将覆盖您使用的代码。
说明差异的基本示例。
使用A：
* {
box-sizing: border-box;
}
/* my code*/
body {
box-sizing: content-box;
}
.box {
width:100px;
height:100px;
border:10px solid;
padding:10px;
}
p {
padding:5px;
border:2px solid red;
}<div class="box">
<p></p>
</div>使用B：
*,
*::before,
*::after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
/* my code*/
body {
box-sizing: content-box;
}
.box {
width: 100px;
height: 100px;
border: 10px solid;
padding: 10px;
}
p {
padding: 5px;
border: 2px solid red;
}<div class="box">
<p></p>
</div>是。通过测试确认：
* {
box-sizing: border-box;
}
.example {
border: 1px solid red;
background: blue;
width: 100px;
height: 100px;
padding: 20px;
}
.border-box {
box-sizing: border-box;
}
.content-box {
box-sizing: content-box;
}<body>
<div class="example"></div>
<div class="example content-box"></div>
<div class="example border-box"></div>
<body>没有div类的.border-box仍然从box-sizing继承其body。