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