如果我以百分比形式设置子元素的大小，则大小将相对于父元素的内容框进行计算，这与我将其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 还是我错过了什么？
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斌：http://jsbin.com/efUBOsU/1/
关于您的"奖金问题"，百分比宽度基于容器大小，而不是元素大小。width、padding和margin都是如此。你得到一个 68px 的填充，因为容器是 680px。这可能看起来很奇怪，但当你有像{width: 80%; padding: 10%;}这样的规则时，它会非常方便，因为它保证你的总对象尺寸将是容器的 100%，而不是基于子元素内容的任意值。
注意：将来请单独提出其他问题，尤其是当它们与您的主要问题仅略有关系时。