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

时间:2011-07-29 18:49:27

标签: html css

在下面的示例中,外部黄色框的宽度为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%;
}

谢谢!

2 个答案:

答案 0 :(得分:3)

非常有意义(jk)。这是因为子div正在继承父级的填充。

答案 1 :(得分:1)

我不确定你想要做什么,但为什么不为每个div创建一个单独的类,而不是通过造型只是简单的div开始?这样继承不会干扰你想要的东西。

这是一个小提琴:http://jsfiddle.net/B3Mjt/

div.parent {
    background-color:yellow;
    padding-left:20px;
    padding-right:20px;
    width:200px;
    height:200px;
 }
div.child {
    background-color:red;
    width:100%;
    height:50%;
 }