css - 有没有与显示相反的东西：无？

Question

的反义词visibility: hidden是visibility: visible。同样，有什么相反的display: none吗？

许多人在弄清楚如何显示一个元素时感到困惑display: none，因为它不像使用visibility属性那样清晰。

我可以只使用visibility: hidden而不是display: none，但它不会产生相同的效果，所以我不会使用它。

score 216 · Accepted Answer

display: none没有像visibility:hidden确实相反的字面意思。

该visibility属性决定元素是否可见。因此，它有两个相反的状态 (visible和)。hidden

display然而，该属性决定了元素将遵循的布局规则。元素在 CSS 中的布局方式有多种不同的规则，因此有几种不同的值（block、inline等inline-block-请参阅此处的这些值的文档）。

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

所有其他值display导致元素成为页面的一部分，因此在某种意义上它们都与display:none.

但没有一种价值是直接相反的display:none——就像没有一种发型与“秃头”相反。

score 106 · Accepted Answer

一个真正的对立面display: none没有（还）。

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

来自MDN（Mozilla 开发者网络）：

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

（来源：https ://developer.mozilla.org/docs/Web/CSS/unset ）

另请注意，display: revert目前正在开发中。有关详细信息，请参阅MDN。

score 39 · Accepted Answer

在 Javascript 中更改元素display时，在许多情况下，“撤消”结果的合适选项element.style.display = "none"是element.style.display = "". 这会从属性中删除display声明，将style属性的实际值恢复display为文档样式表中设置的值（如果未在其他地方重新定义，则恢复为浏览器默认值）。但更可靠的方法是在 CSS 中创建一个类，例如

.invisible { display: none; }

并将此类名称添加/删除到/从element.className.

score 4 · Accepted Answer

4

您可以使用

display: normal;

它正常工作....它是css中的一个小黑客;）

于 2014-12-05T07:51:20.540 回答

score 4 · Accepted Answer

就像 Paul 解释的那样，显示没有字面上的对立面：HTML 中没有，因为每个元素都有不同的默认显示，您还可以使用类或内联样式等更改显示。

但是，如果您使用 jQuery 之类的东西，它们的 show 和 hide 函数的行为就好像与 display none 相反。当您隐藏，然后再次显示一个元素时，它将以与隐藏之前完全相同的方式显示。他们通过在隐藏元素时存储 display 属性的旧值来做到这一点，这样当您再次显示它时，它将以与隐藏它之前相同的方式显示。 https://github.com/jquery/jquery/blob/740e190223d19a114d5373758127285d14d6b71e/src/css.js#L180

这意味着如果您将 div 设置为例如显示内联或内联块，然后将其隐藏然后再次显示，它将再次显示为显示内联或内联块，与以前相同

<div style="display:inline" >hello</div>
<div style="display:inline-block">hello2</div>
<div style="display:table-cell" >hello3</div>

脚本：

  $('a').click(function(){
        $('div').toggle();
    });

请注意，即使隐藏（显示：无）并再次显示，div 的显示属性仍将保持不变。

score 4 · Accepted Answer

4

我用 display:block; 它对我有用

于 2015-12-10T13:07:38.827 回答

score 3 · Accepted Answer

这是来自未来的答案……在你问这个问题大约 8 年后。虽然仍然没有相反的价值display: none，但请继续阅读……还有更好的东西。

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

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

长期以来，这一直是现实，我们已经学会了忍受它，但是一些早该进行的改进（希望如此！）正在向我们走来。

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

与此同时，Chromium (85+) 给了我们content-visibility财产，并大张旗鼓地宣布了它。它旨在解决一个不同的问题——通过不渲染元素（及其子布局）来加快页面加载时间，直到它接近视口并且确实需要被看到，同时仍然可以访问“查找”搜索等。它确实只需为其赋予 value 即可自动执行此操作auto。这本身就是一个令人兴奋的消息，但看看它还有什么作用……</p>

该属性为您提供了与屏幕外content-visibility: hidden内容相同的未渲染内容和缓存渲染状态的所有好处。content-visibility: auto但是，与 with 不同 auto，它不会自动开始在屏幕上呈现。

这为您提供了更多控制权，允许您隐藏元素的内容，然后快速取消隐藏它们。

将其与隐藏元素内容的其他常见方式进行比较：

display: none: 隐藏元素并破坏其渲染状态。这意味着取消隐藏元素与渲染具有相同内容的新元素一样昂贵。

visibility: hidden: 隐藏元素并保持其渲染状态。这并没有真正从文档中删除元素，因为它（和它的子树）仍然占用页面上的几何空间并且仍然可以单击。它还会在需要时随时更新渲染状态，即使在隐藏时也是如此。

content-visibility: hidden另一方面，隐藏元素同时保留其呈现状态，因此，如果需要进行任何更改，它们只会在元素再次显示时发生（即content-visibility: hidden属性被删除）。

哇。所以它display: none一直都是应该的——一种从布局中移除元素的方式，优雅地，完全独立于显示类型！所以content-visibility: hiddenis的“对立面” content-visibility: visible，但是你有第三个非常有用的选项，auto它为你做延迟渲染，加速你的初始页面加载。

这里唯一的坏消息是 Firefox 和 Safari 尚未采用它。但是谁知道，当您（亲爱的开发人员）阅读本文时，情况可能已经改变。密切关注https://caniuse.com/css-content-visibility！

score 1 · Accepted Answer

对于打印机友好的样式表，我使用以下内容：

/* screen style */
.print_only { display: none; }

/* print stylesheet */
div.print_only { display: block; }
span.print_only { display: inline; }
.no_print { display: none; }

当我需要打印包含值的表单并且输入字段难以打印时，我使用了它。所以我添加了包含在 span.print_only 标记中的值（div.print_only 在其他地方使用），然后将 .no_print 类应用于输入字段。所以在屏幕上你会看到输入字段，打印时只有值。如果你想变得花哨，你可以在更新字段时使用 JS 来更新 span 标签中的值，但在我的情况下这不是必需的。也许不是最优雅的解决方案，但它对我有用！

score 1 · Accepted Answer

我在构建一个应用程序时遇到了这个挑战，我希望为某些用户隐藏一个表格，但不为其他用户隐藏。

最初，我将其设置为 display:none，但随后 display:inline-block 用于那些我想看到它但我遇到了您可能期望的格式问题（列合并或通常混乱）的用户。

我解决它的方法是先显示表格，然后为那些我不想看到它的用户执行“显示：无”。这样，它可以正常格式化，但随后会根据需要消失。

有点横向解决方案，但可能会帮助某人！

score 0 · Accepted Answer

您可以使用显示：块

例子：

<!DOCTYPE html>
<html>
<body>

<p id="demo">Lorem Ipsum</p>

<button type="button" 
onclick="document.getElementById('demo').style.display='none'">Click Me!</button>
<button type="button" 
onclick="document.getElementById('demo').style.display='block'">Click Me!</button>

</body>
</html>

score 0 · Accepted Answer

0

要返回原始状态，请输入：

 display=""

于 2021-09-19T17:49:05.250 回答

score -1 · Accepted Answer

-1

在使用 react native 时，与“none”相反的是“flex”。

于 2020-06-07T17:59:04.597 回答

score -2 · Accepted Answer

visibility:hidden 将隐藏元素，但元素是它们的 DOM。在 display:none 的情况下，它会从 DOM 中删除元素。

因此，您可以选择隐藏或取消隐藏元素。但是一旦你删除它（我的意思是不显示）它就没有明确的相反值。display 有几个值，如 display:block、display:inline、display:inline-block 和许多其他值。您可以从 W3C 中查看。

score -2 · Accepted Answer

display:unset 将其设置回一些初始设置，而不是之前的“显示”值

我只是再次复制了以前的显示值（在我的情况下显示：flex;）（在显示非之后），它成功地覆盖了显示：无

（我使用 display:none 来隐藏移动和小屏幕的元素）

score -3 · Accepted Answer

-3

最好的答案display: none是

display:inline

或者

display:normal

于 2017-03-13T19:02:56.267 回答

score -4 · Accepted Answer

-4

最好的“相反”是将其恢复为默认值，即：

display: inline

于 2014-01-29T21:38:38.220 回答

score -4 · Accepted Answer

-4

您可以使用它display:block;并添加overflow:hidden;

于 2017-01-06T10:06:20.213 回答

css - 有没有与显示相反的东西：无？

17 回答 17

Related

Reference