css - box-sizing: border-box 没有声明高度/宽度

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您明确定义两者都具有固定大小，并且此大小将包括边框、填充和内容。我们可以在 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.

现在，假设您包含 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 的 strating填充两个框将没有内容收缩但第二个框有更多的边框，这在逻辑上会使其尺寸更大。定义宽度或高度也变得毫无用处。

换句话说，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>

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