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

长话短说

一个想法是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，您明确定义两者都具有固定大小，并且该大小将包括边框、填充和内容。正如我们在文档中可以读到的：

边框

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

和

这里元素的尺寸计算如下：宽度=边框+填充+内容的宽度，高度=边框+填充+内容的高度。

45px现在，假设您在边框中添加了填充5px。在这种情况下，两个框将相等，但您会注意到带边框的框将具有0内容的高度/宽度，因为我们已经使用100px填充和边框 ( 45px*2 + 5px*2 = 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固定宽度/高度将不起作用，因为 border + padding 超出了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>

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