在html中,如果子元素的父元素有填充,它的基于百分比的大小是如何计算的？

概述在下面的示例中,外部黄色框的宽度为240px(宽度为200,左侧和右侧的填充为20). 它的红孩子的宽度设定为50％.如果您将红框测量为渲染,则其宽度为140px.见here. 我不确定如何计算这个值.似乎要尊重父级的填充,孩子的宽度应该是100(200的50％是100).或者,如果计算中包含填充,则它应为120(240的50％为120).我不能达到140 …… 如果我将孩子的宽度设置为100％, 在下面的示例中,外部黄色框的宽度为240px(宽度为200,左侧和右侧的填充为20).

它的红孩子的宽度设定为50％.如果您将红框测量为渲染,则其宽度为140px.见here.

我不确定如何计算这个值.似乎要尊重父级的填充,孩子的宽度应该是100(200的50％是100).或者,如果计算中包含填充,则它应为120(240的50％为120).我不能达到140 ……

如果我将孩子的宽度设置为100％,则孩子的宽度最终为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中,如果子元素的父元素有填充,它的基于百分比的大小是如何计算的？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。