是否有相反的显示:无？

Question

是否有相反的显示:无？

Moh*_*qui 181 css

相反的visibility: hidden是visibility: visible.同样,有没有相反的display: none？

许多人变得困惑,弄清楚如何显示元素display: none,因为它不像使用visibility属性那样清晰.

我可以使用visibility: hidden而不是display: none,但它没有给出相同的效果,所以我不会用它.

Answer 1

Pau*_*ite 162

display: none没有与之相反的字面意思visibility:hidden.

该visibility属性决定一个元素是否可见或不可见.因此它具有两个状态(visible和hidden),它们彼此相反.

display但是,该属性决定元素将遵循的布局规则.有几种不同类型的规则元素将如何自己奠定了在CSS,所以有几个不同的值(block,inline,inline-block等- 请参阅文档这些值在这里).

display:none 完全从页面布局中删除元素,就好像它不存在一样.

所有其他值都会display导致元素成为页面的一部分,所以从某种意义上说它们都是相反的display:none.

但是没有一个价值直接相反display:none- 就像没有一种发型与"秃头"相反.

我投票给'秃头'的例子:)非常容易理解的例子! (23认同)
加上1为"秃头"的例子 (9认同)
我注意到你在删除的自我回答中提到了`display:initial` - 对于实现CSS2.1的浏览器,它与`display:inline`是同义词.对于给定元素,它不会将`display`重置为浏览器默认值 - 这不是"初始值"的含义. (2认同)
任何发型都是秃头的反面。 (2认同)

Answer 2

Roc*_*ard 77

与之相反的display: none是(还).

但是display: unset非常接近并且在大多数情况下都有效.

来自MDN(Mozilla开发者网络):

未设置的CSS关键字是初始关键字和继承关键字的组合.与其他两个CSS范围的关键字一样,它可以应用于任何CSS属性,包括CSS简写全部.如果该属性从其父级继承,则将该属性重置为其继承的值,否则重置为其初始值.换句话说,它的行为类似于第一种情况下的inherit关键字,就像第二种情况下的initial关键字一样.

(来源:https://developer.mozilla.org/docs/Web/CSS/unset)

还要注意display: revert目前正在开发中.有关详细信息,请参阅MDN

为什么这会得到这么少的赞成.有效 (7认同)

Answer 3

Ily*_*syn 30

display在Javascript中更改元素时,在许多情况下,"撤消"结果的合适选项element.style.display = "none"是element.style.display = "".这display将从style属性中删除声明,将属性的实际值恢复display为文档样式表中设置的值(如果未在其他位置重新定义,则返回到浏览器默认值).但更可靠的方法是在CSS中使用类

.invisible { display: none; }

Run Code Online (Sandbox Code Playgroud)

并向/从中添加/删除此类名称element.className.

如果你想用 `.element { display: '' !important }` 覆盖 `.element { display: none }`（例如在 CSS lib 中定义），它不会起作用。你必须使用`.element { display: unset !important }` (2认同)
我只在 JavaScript 中讲述了“撤消”`display:none`。当然，空字符串在 CSS 中不起作用，因为它是无效值。但是，您建议的`display: unset` 不会恢复，例如，`<div>` 的默认`display:block` 或`<tr>` 的默认`display:table-row`，它有效地将所有内容转换为 `display:inline`（就像 `display:initial`）。为了恢复元素的浏览器默认值，有`display:revert`，但它没有得到很好的支持（https://caniuse.com/#feat=css-revert-value）。 (2认同)

Answer 4

小智 6

您可以使用

display: normal;

Run Code Online (Sandbox Code Playgroud)

它正常工作....它是一个小的黑客在CSS;)

所以换句话说,你可以使用`display:chunk norris;`来获得同样的效果,还有更多的踢. (25认同)
值'normal'不是`display`属性的有效值,因此它被忽略并且有效地工作就像`element.style.display =''`赋值(参见[我的答案](http://stackoverflow.com)/a/17631239/2533215)). (4认同)
为什么这会被贬低？这是一个不好的方法吗？它适用于桌面,但我应该使用其他东西吗？ (2认同)
如果你想用 `.element { display: normal !important }` 覆盖 `.element { display: none }`（例如在 CSS lib 中定义），它不会工作。你必须使用`.element { display: unset !important }` (2认同)

Answer 5

Kal*_*Kal 6

这是您提出问题大约 8 年后，来自未来\xe2\x80\xa6 的答案。虽然仍然没有相反的价值display: none，但请继续阅读\xe2\x80\xa6，还有更好的值。

\n

这display财产是如此超载，这并不好笑。它至少具有三种不同的功能。它控制：

\n

外部显示类型（元素如何参与父流布局，例如block，inline）
内部显示类型（子元素的布局，例如flex，grid）
显示框（元素是否显示，例如contents，none）。

\n

长期以来，这一直是现实，我们已经学会忍受它，但一些迟来的改进正在（希望如此！）即将到来。

\n

Firefox 现在支持分隔外部和内部显示类型的属性的双值语法（或多关键字值）。display例如，block现在变成block flow，并且flex变成block flex。它并不能解决以下问题none，但我认为明确的关注点分离是朝着正确方向迈出的一步。

\n

与此同时，Chromium (85+) 已经为我们提供了该content-visibility属性，并大张旗鼓地宣布了这一点。它旨在解决一个不同的问题\xe2\x80\x94通过在元素（及其子布局）接近视口并且确实需要被看到之前不渲染元素（及其子布局）来加速页面加载时间，同时仍然可以通过“查找”访问搜索等。它只需给它值就可以自动执行此操作auto。这本身就是令人兴奋的消息，但看看它还有什么作用\xe2\x80\xa6

\n

\n
该属性为您提供与屏幕外content-visibility: hidden相同的未渲染内容和缓存渲染状态的所有好处。content-visibility: auto但是，与\n不同的是auto，它不会自动开始在屏幕上渲染。
\n
这为您提供了更多控制权，允许您隐藏元素的\n内容并随后快速取消隐藏它们。
\n
将其与隐藏元素内容的其他常见方法进行比较：
\n
\n
display: none：隐藏元素并破坏其渲染状态。这意味着取消隐藏元素与渲染具有相同内容的新元素一样昂贵。
\n
visibility: hidden：隐藏元素并保持其渲染状态。这并没有真正从文档中删除元素，因为它（及其子树）仍然占用页面上的几何空间并且仍然可以单击。即使隐藏时，它也会在需要时随时更新渲染状态。
\n
\n
content-visibility: hidden另一方面，隐藏元素同时保留其渲染状态，因此，如果需要发生任何更改，它们仅在元素再次显示时发生（即属性被content-visibility: hidden删除）。
\n

\n

哇。因此，这应该是一种display: none从布局中优雅且完全独立于显示类型删除元素的方法！所以“相反”content-visibility: hidden是content-visibility: visible，但您还有第三个非常有用的选项，其中auto可以为您进行延迟渲染，从而加快初始页面加载速度。

\n

唯一的坏消息是 Firefox 和 Safari 尚未采用它。但谁知道呢，当您（亲爱的开发人员）阅读本文时，情况可能已经发生了变化。保持一只眼睛https://caniuse.com/css-content-visibility！

\n

归档时间：	12 年，3 月前
查看次数：	170181 次
最近记录：	6 年，5 月前