如果我以百分比设置子元素的大小，则大小将相对于父元素计算内容框 http://www.w3schools.com/css/css_boxmodel.asp，独立于我已经设置了它的事实box-sizing财产给border-box.
所以如果我有这样的东西：
.parent {
box-sizing: border-box;
padding: 0 100px;
width: 600px;
}
.child {
width: 50%;
}
宽度为.child将是 50%400px（应用填充后父级的宽度）。您可以在此处查看示例：JSBin http://jsbin.com/oxUyuxI/2/edit
主要问题
有没有办法让子元素的宽度相对于
父母border-box而不是父母的content-box?
奖金问题
在制作示例时，我注意到尺寸计算中出现了奇怪的行为。设置.parent的填充为0 10%实际上每边都给出了 68 多个像素的填充。这是为什么？ 600px 的 10% 不是 60px 还是我遗漏了一些东西？
The width属性被明确定义为相对于内容框并且box-sizing在父母身上并不会改变这一点，但是有一个技巧可用。你需要的是一个边界不占用任何空间值得庆幸的是，这正是outline财产确实如此。
有一个问题：轮廓默认位于内容框之外。不过不用担心，因为其中之一outline的相关属性outline-offset接受负值，这会将我们的大纲带入内容框中！
HTML
<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="outer">
<div class="inner">
TEST
</div>
</div>
</body>
</html>
CSS
.outer {
position: relative;
width: 100px;
height: 100px;
outline:20px solid red;
border:1px solid black;
outline-offset: -20px;
}
.inner {
width: 50%;
height: 100%;
outline:1px solid yellow;
position: absolute; /* required so inner is drawn _above_ the outer outline */
background-color: blue;
}
JS Bin: http://jsbin.com/efUBOsU/1/ http://jsbin.com/efUBOsU/1/
关于您的“奖金问题”百分比宽度基于容器大小，而不是元素大小。这对于width, padding and margin。你得到的内边距是 68px，因为容器是 680px。这可能看起来很奇怪，但是当你有这样的规则时它会非常方便{width: 80%; padding: 10%;}因为它保证您的对象总尺寸将是容器的 100%，而不是基于子元素内容的任意值。
注意：将来请单独提出其他问题，尤其是当这些问题与您的主要问题仅有轻微相关时。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
