框大小：没有声明的高度/宽度的边框

Question

我试图了解box-sizing: border-box在下面的代码中的工作方式。设置高度或宽度（不填充）时，将按预期工作（边框显示在div内）。但是，如果仅使用填充来创建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 +    填充+内容的宽度，而 height =边框+填充+高度    内容。

现在，假设您使用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和固定的宽度/高度将无效，因为边框+填充超出了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;}