box-sizing: 没有声明高度/宽度的边界框

Question

我试图了解box-sizing: border-box 在下面的代码中是如何工作的。当设置了高度或宽度（无填充）时，它会按预期工作（边框出现在 div 内）。但是如果你只使用 padding 来创建 div 的维度，它是行不通的。有人可以解释为什么吗？这是演示：

div.test {
  background-color: red;
  box-sizing: border-box;
  display: inline-block;
  border: 5px solid;
  text-align: center;
  padding: 50px;
  vertical-align: middle;
  // height: 100px;
  // width: 100px;
}

div.test:first-of-type {
  border: none;
}

<div class="test">aa</div>
<div class="test">aa</div>

https://codepen.io/anon/pen/bxaBER

Answer 1

TL;DR

一个想法是为两者保留border。而不是none，只需将颜色设置为transparent，以便两者的大小（包括边框+填充）始终相同。

div.test {
  background-color: red;
  box-sizing: border-box;
  display: inline-block;
  border: 5px solid;
  text-align: center;
  padding: 50px;
}

div.test:first-of-type {
  border-color: transparent;
}

<div class="test">aa</div>
<div class="test">aa</div>

---

为什么？

在设置height/width 时，您明确定义两者都具有固定大小，并且该大小将包括边框、填充和内容。正如我们在the documentation 中看到的那样：

边框

告诉浏览器考虑任何边框和填充 您为元素的宽度和高度指定的值。如果你设置 一个元素的宽度为 100 像素，这 100 像素将包括任何 您添加的边框或填充，内容框会缩小以吸收 额外的宽度。

和

这里元素的尺寸计算为：width = border + 内容的内边距 + 宽度，以及 高度 = 边框 + 内边距 + 高度 的内容。

现在，假设您在5px 边框中添加了45px 的填充。在这种情况下，两个框将相等，但您会注意到带有边框的框的内容将具有高度/宽度0，因为我们已经达到带有填充和边框（45px*2 + 5px*2 = 100px）的100px，但另一个框将还有一些内容空间：

div.test {
  background-color: red;
  box-sizing: border-box;
  display: inline-block;
  border: 5px solid;
  text-align: center;
  padding: 45px;
  height:100px;
  width:100px;
  vertical-align:middle;
}

div.test:first-of-type {
  border:none;
}

<div class="test">aa</div>
<div class="test">aa</div>

现在如果我们开始增加内边距，第一个框仍有一些内容要缩小（10px），但第二个没有！在这种情况下，border-box 和固定的宽度/高度将不起作用，因为边框 + 填充超出了 100px (46px*2 + 5px*2 = 102px)。这就是为什么从填充的45px 开始，我们看到两个盒子之间的差异，而从填充的50px 开始，两个盒子都没有内容可以缩小，但是第二个盒子有更多的边框，这在逻辑上会使其尺寸更大。定义宽度或高度也变得无用。

换句话说，border-box 仅适用于 padding + border < width/height，因为只有在这种情况下，我们仍然有要缩小的内容。

这是一个更好的插图，边框更大，您会看到我们有 3 个状态。 (1) 两者都有内容要缩小时 (2) 只有一个内容要缩小时 (3) 两者都没有内容要缩小时：

div.test {
  background-color: red;
  box-sizing: border-box;
  display: inline-block;
  vertical-align:top;
  border: 30px solid;
  text-align: center;
  padding: 5px;
  width:100px;
  height:100px;
  animation:pad 10s infinite linear alternate;
}

div.test:first-of-type {
  border:none;
}

@keyframes pad {
 0%  {padding:5px}
 33% {padding:20px}
 66% {padding:50px}
 100% {padding:100px;}
}
.change:after {
  content:"";
  animation:change 10s infinite linear alternate;
}
@keyframes change {
 0%,33%  {content:" (1): same size for both and fixed width/height are respected "}
 33.1%,66% {content:" (2): The second box has no more content to shrink, it starts growing (fixed height/width and border-box has no effect)"}
 66.1%,100% {content:" (3): Both boxes has no more content to shrink, they will keep growing BUT the second one has more border so bigger size"}
}

<p class="change">we are at state </p>
<div class="test">aa</div>
<div class="test">aa</div>

为了避免这种情况，我们像最初所说的那样为两个元素保留相同的填充/边框。

Answer 2

假设这是页面上唯一的 css 渲染时框的宽度是多少

.box{ Width: 100px; Height: 50px; Padding: 5px; Border: 1px solid red; Background-color: red;}