我已经做了一段时间的css，但不知道这是怎么回事.感觉真的很傻:)你能解释一下这种行为吗？
.parent {
display:inline-block;
}
.child {
border: 2px solid red;
padding: 20px; /* this works as expected */
padding: 20%;
box-sizing: border-box; /* makes no difference */
}<div class="parent">
<div class="child">CSSisAwesome</div>
</div>由于使用百分比值，您将面临循环计算.父元素是内联块元素，因此其宽度由其内容定义，并且相同的内容使用百分比值，因此内容需要引用该百分比，即父元素的宽度.你有一个循环.
在这种情况下，浏览器将首先忽略填充来定义父宽度，然后计算填充，但我们不能再次计算父宽度，因为将有一个无限循环.
请判断以下内容:
.parent {
display: inline-block;
}
.child {
border: 2px solid red;
}<div class="parent">
<div class="child">CSSisAwesome</div>
</div>
<br>
<br>
<div class="parent">
<div class="child" style="padding: 20%;">CSSisAwesome</div>
</div>请注意，在这两种情况下，父对象的宽度是相同的，并且该宽度由内容定义.填充是稍后添加的，并且会造成溢出.
您可以在the Specification中找到模式详细信息
有时，百分比大小的长方体的包含块的大小取决于长方体本身的固有大小，从而产生循环依赖.
相关问题:
Why does percentage padding break my flex item?个
CSS Grid - unnecessary word break个
How percentage truly works compared to other units in different situations个