1

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

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 时，它应该缩小到“真正的”零高度，这意味着文本、填充和边框应该在 之外div，因此应该是不可见的（由于overflow: hidden;）。

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

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

4

1 回答 1

2

border-box告诉浏览器在您为元素的 width 和 height 指定的值中考虑任何边框和填充。如果您将元素的宽度设置为 100 像素，则该 100 像素将包括您添加的任何边框或填充，并且内容框将缩小以吸收额外的宽度。这通常会使调整元素大小变得容易得多。参考

这是一个更好地说明您的问题的示例：

.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 并且边框/填充已经消耗了所有空间。

合乎逻辑的是，当高度等于 0 时，两者都是相同的，因为在第一种情况下，我们告诉浏览器内容区域应该为 0（我们不关心填充/边框），而在第二种情况下，我们告诉浏览器将填充/边框考虑到我们指定的高度，因此我们为内容区域提供的空间更少，并且因为我们不能小于 0，所以它的 0。

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

更多示例和详细信息相关：box-sizing:border-box with no declaration height/width

于 2019-11-13T14:02:29.447 回答