如果我使用百分比设置子元素的大小,则其大小将相对于父元素的content-box进行计算,而不管我是否将其
box-sizing
属性设置为border-box
。
因此,如果我有这样的内容:
.parent {
box-sizing: border-box;
padding: 0 100px;
width: 600px;
}
.child {
width: 50%;
}
.child
的宽度将是 400px
(应用了父元素填充后的宽度)的 50%。您可以在此处查看示例:JSBin
主要问题
有没有办法使子元素的宽度相对于父元素的
border-box
而不是父元素的content-box
?
奖励问题
在制作我的示例时,我注意到计算大小的行为很奇怪。将 .parent
的填充设置为 0 10%
实际上会从每个侧面给出 68 像素的填充。为什么会这样?600px 的 10% 不是 60px 吗?还是我漏掉了什么?