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 还是我遗漏了什么？

4

1 回答 1

6

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

注意：以后请单独提出其他问题，特别是当它们与您的主要问题仅略微相关时。

于 2013-09-13T05:12:44.267 回答