box-sizing: border-box 没有声明 height/width

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:

中读到

border-box

tells the browser to account for any border and padding in the values you specify for an element's width and height. If you set an element's width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width.

和

Here the dimensions of the element are calculated as: width = border + padding + width of the content, and height = border + padding + height of the content.

现在，假设您在 5px 边框中加入了 45px 的填充。在这种情况下，两个框将是相等的，但您会注意到带有边框的框的内容将具有 height/width 0，因为我们已经达到 100px 填充和边框（45px*2 + 5px*2 = 100px) 但是另一个盒子仍然会有一些 space 的内容：

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 和固定的 width/height 将不起作用，因为边框 + 填充超过了 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>

为了避免这种情况，我们对两个元素保持相同的 padding/border，就像我们最初所说的那样。

Answer 2

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

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

box-sizing: border-box 没有声明 height/width

box-sizing: border-box with no declared height/width

css

box-sizing

TL;DR

为什么？