相对于父边框框调整子元素的大小答案

【问题标题】：Sizing a child element relative to parent's border-box相对于父边框框调整子元素的大小
【发布时间】：2015-08-01 19:06:55
【问题描述】：

如果我以百分比设置子元素的大小，则将相对于父元素的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 还是我遗漏了什么？

【问题讨论】：

能否请您发布 HTML 代码？或者在 jsfiddle 上更新它
您可以在示例链接中找到它。这没什么特别的：只有两个嵌套元素，没有别的。
我希望有一个简单的方法来做到这一点。

标签： sizing css

【解决方案1】：

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%，而不是基于您的子元素内容的任意值。

注意：以后请单独提出其他问题，尤其是当它们与您的主要问题关系不大时。

【讨论】：

outline 不允许使用某种border-radius，我也认为是影子。