gpt4 book ai didi

html - 将所有 CSS 高度设置为 0px 会使渲染高度 > 0

转载 作者:可可西里 更新时间:2023-11-01 12:49:22 25 4
gpt4 key购买 nike

下面的示例定义了两种样式:undisplayed 仅设置 display:none,以及 noheight 设置盒模型中的所有高度属性到 0 像素。它还根据 Div height:0px does not work? 中的建议设置 line-heightoverflow .

每种样式都有一个段落,上下各有一条水平线。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
<title>noheight &ne; undisplayed</title>
<style>
.undisplayed {
display:none;
}
.noheight {
max-height:0px;
height:0px;
border-width:0px;
outline-width:0px;
margin-top:0px;
margin-bottom:0px;
padding-top:0px;
padding-bottom:0px;
visibility:hidden;
line-height:0px;
overflow:hidden;
}
</style>
</head>
<body>
<h3>undisplayed:</h3>
<hr/>
<p class="undisplayed">text</p>
<hr/>
<h3>noheight:</h3>
<hr/>
<p class=noheight>text</p>
<hr/>
</body>
</html>

我已经在 Firefox 23.0.1 和 Safari 6.0.5 上测试过了。在这两种情况下,noheight 段落周围的两条水平线之间的间距都大于 undisplayed 段落周围的两条水平线之间的间距。为什么?

我有兴趣找出原因,原因有二:

  1. 我讨厌神秘。

  2. 我一直在使用 CSS 动画来使某些内容在高度上收缩为零。对于更改 noheight 类中提到的高度属性的动画,我总是会留下额外的垂直空间。我知道我可以用 jQuery 做到这一点,而且我用 CSS 动画做到这一点的努力可能看起来不那么圆滑,但我正在试验以提高我的理解。

我希望我的 noheight 样式的属性列表有点多余,有些多余。如果是这样,什么是多余的(即可以安全地省略,比如说,最近的 Chrome、IE、Firefox 和 Safari 版本)?

最佳答案

参见 Margin collapsing

由于 .undisplayed 元素将 display 设置为 none 他从可视化树中移除,因此从周围的两个 中留出边距hr折叠

然而,对于 .noheight 元素,情况并非如此,该元素仍然存在并呈现(高度为 0 像素),因此边距不能折叠

关于html - 将所有 CSS 高度设置为 0px 会使渲染高度 > 0,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18803434/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com