如果`element.style.box-sizing`是`border-box`，则设置`element.style.height`不能按预期工作”>

问题描述 投票：0回答：1

我对以下代码（JSFiddle here）有所了解：

CSS：

.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;
}

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

JavaScript：
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";

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

我愿意不是

了解第一个（黄色）overflow: hidden;的行为。它的值为div，因此其高度does包括填充和边框。因此，当其高度设置为0时，它应缩小到“真实”零高度，这意味着文本，填充和边框应在box-sizing: border-box;之外，因此应该是不可见的（由于[C​​0]） 。

有人可以解释为什么不是这种情况，以及为什么第一个div的行为与第二个overflow: hidden;一样吗？

P.S。在编写本文时，它们均在Firefox和Chrome上进行了测试，都是最新的（生产渠道）。

我对以下代码（这里是JSFiddle）有一个理解上的问题：CSS：.myClass1 {box-sizing：border-box;溢出：隐藏； padding-top：2em； padding-bottom：2em;背景-...

javascript css dom height box-sizing
1个回答
0
投票

div告诉浏览器考虑任何边框和填充在您为元素的宽度和高度指定的值中

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.