javascript - 如果 `element.style.height` 为 `element.style.box-sizing`，则设置 `border-box` 无法按预期工作-6ren

javascript - 如果 `element.style.height` 为 `element.style.box-sizing`，则设置 `border-box` 无法按预期工作

转载作者：行者123 更新时间：2023-11-30 13:48:20

24

4

我对以下代码有理解上的问题:

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 一样？

附言在撰写本文时已在 Firefox 和 Chrome 中测试，两者都是最新的(生产 channel )。

最佳答案

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

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

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

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

关于javascript - 如果 `element.style.height` 为 `element.style.box-sizing`，则设置 `border-box` 无法按预期工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58838547/

24

4

0

文章推荐： JavaScript + JQUERY : Calculating based on two input variables

文章推荐： c# - 对不同类型使用相同的 DataTemplate

文章推荐： c# - 将c#中的字符串传递给静态语句

文章推荐： javascript - 高阶函数 Javascript

html - css height, max-height, line-height VS.垂直对齐
这个问题在这里已经有了答案: How can I vertically align elements in a div? (28 个答案) Vertical Aligned Text and Im
iOS - AutoLayout 可以像 view0.height = view1.height + view2.height 这样的约束吗？
我想做一个像 view0.height = view1.height + view2.height 这样的约束。当 view1.height 或 view2.height 改变时，view0.heig
html - float div 中的图像 : minimum height = font-height/line-height?
有人可以解释为什么这个标记: 呈现大约 2x18 的 float div(在 Chrome/Firefox 中)而不是 2x2 div？即使所有空格都被删除，图像似乎也遵循 font-
html - 我如何在 CSS 中执行 "min-height: height of content; height: relative to viewport;"？
我的 HTML 页面上有一些可拉伸(stretch)的元素。使用这个 CSS .stretchable-element { height: 25%; } 随着浏览器窗口高度的增加，可伸缩元素
android - calculateInSampleSize，为什么 Math.round 在 width > height 时处理 height(height/reqHeight)？
我在“developer.android.com”上查看以缩小我的位图文件，但我发现了一件事我不明白。所以我很感激你能给我一点帮助。这是一个 snippet来自 developer.android.
html - 为什么高度为: 100% on a child element not apply when the parent element has a min-height/max-height value but no height value?
假设我们有以下设置: .container { background-color: red; width: 500px; min-height: 300px; } .child { b
jquery - $(window).height() 与 $(document).height
我遇到了高度错误的问题 $(window).height(); 也有类似的问题 here 就我而言，当我尝试时 $(document).height(); 它似乎返回了正确的结果窗口高度返回320
JavaFX : Adapt component height to its children height?
我正在尝试使用 javaFX (2.2) 开发桌面应用程序，但我遇到了一些困难，无法真正让它按照我希望的方式运行。作为该框架的新用户，我可能没有按应有的方式使用它... 我想要的是一种仪表板，在 Sc
jquery - 使 Container.height = Right_Column.height
就这么简单:) 我右边的列动态变化，由于左列的高度设置为 100%，我认为根据 Right_Column 的高度动态修改容器的高度会很好。有小费吗？谢谢:) 最佳答案如果我正确理解了问题，你可以做这
macos - 界面生成器 : Height = half the height of the container
我有一个 ScrollView(包含 NSTextEditor)，其顶部、左侧和右侧约束相对于其容器(主窗口)正确设置为 0。我无法使其高度为主容器的一半。有什么帮助吗？最佳答案如果我理解正确，
javascript - 移动浏览器中的 $(document).height() != $(window).height()
这个问题之前曾被问过(Infinite Scroll on Mobile browsers)，但没有得到回应。我正在尝试实现无限滚动。检查文档是否在底部，导致更多加载的函数是: if ($(win
html - min-height 和 height 属性有什么区别？
这个问题在这里已经有了答案: height:100% VS min-height:100% (4 个答案) 关闭 6 年前。
javascript - 检测用户 browser-height >= page body-height
我在尝试解决这个问题时遇到了一些问题。我已经编写了一个 jquery 函数来检测用户何时点击页面底部并触发一个函数。现在，虽然这适用于最常见的屏幕尺寸，但当用户的屏幕太大以至于可以一次看到整个页面时，
css - 如何: height child gives same height parent . ..？
如何获得与导航高度(填充)相同的导航高度 ...!？ nav { width: 100%; } nav ul { text-align: center; background-
CSS: height % parent with min height % children (相对定位)
所以，实际上我可能完全想多了，应该放弃最小高度，但我目前有以下 HTML:
html - 为什么在这段代码中 Height : auto and Height: 100% on same element
我正在阅读 Bootsrap3 文档。我发现这段页脚代码粘在屏幕底部。 html, body { height: 100%; } #wrap { min-height: 100%; height: a
jquery - CSS height 和 inline height 属性不服从我
我对容器 div 的高度有疑问。我想它是 body 的 100%，但不起作用。我添加了 css body height=100% var d = document; $(d).ready(funct
css-only 100% div height with dynamic height footer
我有一个三部分布局:页眉、内容和页脚。我非常熟悉绝对定位技术；当我希望内容 div 扩展到可用高度的 100% 时，我经常使用它。在这种情况下，我的问题是我事先不知道页脚的高度，它是根据自己的内容动
javascript - window.height 和 document.height 返回相同的值
在下面的代码中，我尝试实现无限滚动。我遇到的问题是“document.height”和“window.height”返回相同的值。有人可以帮我解决我哪里出错了吗？
html - Bootstrap : force image height to height of row
我有一个页面布局，其中两个 div 在一行中彼此相邻对齐。一列包含可变长度的文本，第二列包含图像。标记基本上如下: texttext 我的

首页

博学

6Ren·AI

商城

javascript - 如果 `element.style.height` 为 `element.style.box-sizing`，则设置 `border-box` 无法按预期工作