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

Question

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

10

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

- NinGen ShinRa

你能否发一下 HTML 代码呢？或者更新到 jsfiddle 上。 - Chandrakant

你可以在示例链接中找到它。这并不特别：只有两个嵌套的元素，没有其他内容。 - NinGen ShinRa

我希望有一种简单的方法来做这件事。 - gkiely

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- SpliFF · Accepted Answer

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/

关于你的“奖金问题”，百分比宽度是基于容器大小而非元素大小。这适用于width、padding 和 margin。你得到了 68px 的 padding，因为容器的宽度是 680px。这可能看起来有些奇怪，但当你有一个规则像 {width: 80%; padding: 10%;} 这样时，它会保证你的总对象尺寸将是容器的 100%，而不是基于你的子元素内容的任意值。

注意：在将来，请单独询问其他问题，特别是当它们与你的主要问题只有轻微关联时。