Question

如果我以百分比形式设置子元素的大小，则会相对于父级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 60px的10％还是我遗失了什么？

Answer 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 Bin：http://jsbin.com/efUBOsU/1/

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

注意：将来请分别提出其他问题，特别是当它们与您的主要问题略有关联时。

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

主要问题

奖金问题

1 个答案: