CSS: "display: auto;"?

Question

CSS: "display: auto;"?

37

有一些CSS属性给出的 auto 选项非常有用。但是，似乎没有一个适用于 display 属性的选项。我期望这会根据标签将 display 属性设置为浏览器默认值;例如，<div> 将重置为 display: block;，而 <span> 将重置为 display: inline;。

我错过了类似于 display: auto 的等效选项吗？
如果没有，为什么没有？
最优雅的解决方法是什么？

- jameshfisher

6个回答

24

在CSS3中，有一个初始值。也许尝试使用display: initial;。

- Miles Libbey

谢谢 - 这是我能找到的最接近"display: auto"的东西。 - Goatsy

2

CSS中没有display: auto属性，有效的值在这里

默认值是display: inline。可以从MDN的显示参考中查看。

为什么没有自动值？因为CSS规则的定义。您还应该查看这篇文章中概述的特定性周围的CSS规则。

- Ryan

2

默认的 display 值是 inline，但浏览器的用户代理样式表为许多元素设置了不同的值。例如，Firefox 运行以下代码：http://mxr.mozilla.org/mozilla-central/source/layout/style/html.css - thirtydot

5

W3Schools是一个糟糕的参考网站。这里有一个更好的参考网站：http://reference.sitepoint.com/css/display - Yi Jiang

1

@Ryan：W3Schools是一个糟糕的选择。请参考：http://w3fools.com/。一定要阅读该链接，特别是：“W3Schools有问题-W3Schools.com与W3C没有任何关联。 W3C的成员曾要求W3Schools在过去明确否认任何联系，但他们拒绝这样做。” - thirtydot

@Ryan：“所有参考资料”都没有像W3Schools那样存在多个明显的错误。Sitepoint参考文献中的信息比W3Schools参考文献的质量要高得多。我不在乎那个特定的W3Schools页面是否有问题 - 我关心的是你正在推荐一个通常存在错误或误导性信息的网站。就拿这个页面来说：http://w3schools.com/html/html_head.asp - 在“简化HTML文档”中没有DOCTYPE，太粗糙了。 - thirtydot

1

@thirtydot 是的，它缺少了文档类型声明，我同意这一点，但我提供了一个特定的资源，HTML HEAD 信息不是提供的信息的一部分。我理解你的意思，但你在我的帖子中读入了一些东西，实际上并不存在。我没有推荐一个网站，而是一个具体的资源页面，大多数人都有足够的智慧来认识和理解这一点，无需解释。现在我们需要回到主题上来。 - Ryan

显示剩余3条评论

2

你需要使用 display: revert，它类似于 unset，但是保留了用户代理默认样式表的样式。

- BallpointBen

......12年过去了......谢谢，我认为这是2023年这里最好的答案 :) - jameshfisher

1

有一个inherit选项，它:

指定显示属性的值应该从父元素继承

除此之外，不要设置显示属性，它将默认为任何它默认的值。而且，如果您以编程方式将其设置为空，我认为它只是遵循默认行为：

document.getElementById('myElement').style.display = '';

- Kon

4

因此，一个 <span> 标签会从 <div> 继承 display:block 属性，这可能不是 OP 想要的。 - Wesley Murch

只是说这是一个选项...但你是对的，很可能不是。虽然我确实提到了 display = ""。 - Kon

3

“inherit”是“display”属性的一个合法取值吗？我默认不太相信w3schools网站上的链接。 - Wesley Murch

3

@Wesley Murch: 是合法的。这里有一个更可靠的链接：http://www.w3.org/TR/CSS21/visuren.html#display-prop - thirtydot

@Wesley，这个怎么样？对你来说够好了吗？http://www.w3.org/wiki/CSS/Properties/display#Values - Kon

太好了，谢谢大家 - 我应该自己查一下。我不经常使用 inherit，特别是在显示属性方面。它在这个问题的背景之外非常有用。 - Wesley Murch

-1

根据父元素和相关标签元素，浏览器可以快速调整以适应它。最有效的方法是在HTML开头标签中使用DTD标准来声明显示选择器的其他可用属性，否则它仅使用“块”和“内联”。因此，如果已声明DTD，则在此情况下使用display: inline-block;属性最佳。

- Charming Prince

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- thirtydot · Accepted Answer

你应该使用：

$('element').css('display','');

这将根据当前 CSS 级联的规则，将 display 属性设置为元素的默认值。

例如：

<span></span>

$('span').css('display','none');
$('span').css('display','');

将导致一个具有 display: inline 样式的 span 元素。

但是：

span { display: block }

<span></span>

$('span').css('display','none');
$('span').css('display','');

这将导致一个具有 display: block 属性的 span。

这并不是问题：事实上，这几乎总是期望的结果。