如果 `element.style.box-sizing` 为 `border-box`，则设置 `element.style.height` 无法正常工作

Question

我对以下代码有理解问题：

let myDiv1 = document.getElementById("myDiv1");
alert("Click me to make 'Hello' vanish");
myDiv1.style.height = "0px";

let myDiv2 = document.getElementById("myDiv2");
alert("Click me to make 'World' vanish");
myDiv2.style.height = "0";

.myClass1 {
  box-sizing: border-box;
  overflow: hidden;
  padding-top: 2em;
  padding-bottom: 2em;
  background-color: yellow;
}

.myClass2 {
  box-sizing: content-box;
  overflow: hidden;
  padding-top: 2em;
  padding-bottom: 2em;
  background-color: orange;
}

<body>
  <div id="myDiv1" class="myClass1">
  Hello
  </div>
  <div id="myDiv2" class="myClass2">
  World
  </div>
</body>

我了解第二个（橙色）的行为div：它有 box-sizing: content-box;，因此它的高度不包括填充或边框。因此，当它的高度设置为 0 时，它基本上缩小了文本的高度 "World"，但填充保持原样。由于 padding 超出了原始文本的高度，因此文本在 padding 中仍然可见。现在只有 div 之外的填充部分（由于高度降低）变得不可见（由于 overflow: hidden;）。

我不理解第一个（黄色）div的行为。它有 box-sizing: border-box;，因此它的高度确实包括填充和边框。因此，当它的高度设置为 0 时，它应该收缩到 "real" 零高度，这意味着文本、填充和边框应该在 div 之外，因此应该是不可见的（由于overflow: hidden;).

谁能解释为什么不是这种情况以及为什么第一个 div 的行为与第二个 div 一样？

P.S。在 Firefox 和 Chrome 中测试，在撰写本文时都是最新的（生产频道）。

Answer 1

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. This typically makes it much easier to size elements. ^ref

下面是一个示例，可以更好地说明您的问题：

.box {
  display: inline-block;
  padding-top: 2em;
  padding-bottom: 2em;
  border: 2px solid blue;
  background: linear-gradient(red, red) content-box, orange;
  height: 100px;
  animation:move 5s linear infinite alternate;
}

@keyframes move{
   to {
     height:0;
   }
}

<div class="box">
  World
</div>
<div class="box" style=" box-sizing: border-box;">
  World
</div>

第一个例子很简单，我们将高度（红色区域）减小到 0 并且动画永远不会停止。

在第二种情况下，高度包括填充和边框，所以在达到 0 之前，内容区域已经为 0，这就是动画似乎停止的原因，因为我们不能减少超过 0，并且 border/padding 已经消耗了所有space.

合乎逻辑的是，当高度等于 0 时两者是相同的，因为在第一个中我们告诉浏览器内容区域应该为 0（我们不关心 padding/border）并且在第二种情况，我们告诉浏览器将 padding/border 考虑到我们指定的高度，因此我们为内容区域留出更少的空间，因为我们不能小于 0 然后它的 0.

换句话说，您没有设置将在内容区域、填充和边框之间分割的总高度，而是设置了一个高度并且浏览器正在尽可能地缩小它包括边框和填充。

如果 `element.style.box-sizing` 为 `border-box`，则设置 `element.style.height` 无法正常工作

Setting `element.style.height` not working as expected if `element.style.box-sizing` is `border-box`

javascript

css

height

dom

box-sizing