这是否适用于每个元素？
示例“A”：
*
{
box-sizing: border-box;
}
我认为 box-sizing 不是继承的？
这是关于盒子大小重置的：
示例“B”：
*, *::before, *::after
{
box-sizing: inherit;
}
html
{
box-sizing: border-box;
}
这两个例子会有同样的效果吗？
我认为 box-sizing 不是继承的？
不，这不对。你可以检查一下规范，你会发现继承是NO。在示例 A 中，您只需使用通用选择器来选择所有元素并应用于box-sizing:border-box它们，但它不针对伪元素，因此默认情况下不会box-sizing:border-box设置它们。
这两个例子会有同样的效果吗？
不，他们不会。即使我们认为它是应用于文档的唯一 CSS，示例 B 也会以伪元素为目标，使它们继承 ，box-sizing并且如果我们遵循父子结构，它们将在逻辑上得到，box-sizing:border-box因为html具有box-sizing:border-box。
另一个区别是，使用inherit将考虑父样式，这与示例 A 中显式设置值不同。在示例 A 中，box-sizing如果您想覆盖示例 B 中代码设置的元素，则必须对每个元素进行更改，对元素或任何祖先的更改box-sizing将覆盖您正在使用的代码。
一个基本的例子来说明差异。
用一个：
* {
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。