在以下示例中，外部黄色框的宽度为 240 像素(宽度为 200 加上左右边距为 20)。
它的红色子元素的宽度设置为 50%。如果您测量呈现的红色框，则其宽度为 140 像素。见 here 。
我不确定该值是如何计算的。似乎要尊重父级的填充，子级的宽度应该是 100(200 的 50% 是 100)。或者，如果计算中包含 padding，则应为 120(240 的 50% 为 120)。我打不到140...
如果我将 child 的宽度设置为 100%， child 最终会是 240px 宽。见 here 。
这表明填充确实包含在计算中(240 的 100% 是 240)。好的，那么 50% 应该产生 120(240 的 50% 是 120)，但它没有。
所以，根据我的浏览器，240 的 100% 是 240，240 的 50% 是 140。DOH!
我肯定错过了什么。我确定涉及到一个公式，但我找不到它的文档。
以下是有问题的 CSS 样式:
div {
background-color:yellow;
padding-left:20px;
padding-right:20px;
width:200px;
height:200px;
}
div.child {
background-color:red;
width:50%;
height:50%;
}
谢谢!
最佳答案
完全有道理(jk)。这是因为子 div 继承了父级的填充。
关于html - 在 html 中，当其父元素具有填充时，如何计算子元素的基于百分比的大小？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/6877636/