可见性:隐藏的反面是可见性:可见。同样地,是否有相反的显示:没有?

当一个元素有display: none时,许多人都搞不清楚如何显示它,因为它不像使用visibility属性那么清楚。

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


当前回答

在打印机友好的样式表的情况下,我使用以下:

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

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

I used this when I needed to print a form containing values and the input fields were difficult to print. So I added the values wrapped in a span.print_only tag (div.print_only was used elsewhere) and then applied the .no_print class to the input fields. So on-screen you would see the input fields and when printed, only the values. If you wanted to get fancy you could use JS to update the values in the span tags when the fields were updated but that wasn't necessary in my case. Perhaps not the the most elegant solution but it worked for me!

其他回答

在打印机友好的样式表的情况下,我使用以下:

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

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

I used this when I needed to print a form containing values and the input fields were difficult to print. So I added the values wrapped in a span.print_only tag (div.print_only was used elsewhere) and then applied the .no_print class to the input fields. So on-screen you would see the input fields and when printed, only the values. If you wanted to get fancy you could use JS to update the values in the span tags when the fields were updated but that wasn't necessary in my case. Perhaps not the the most elegant solution but it worked for me!

Display: none不像visibility:hidden那样有字面上的相反含义。

visibility属性决定一个元素是否可见。因此,它有两种状态(可见和隐藏),它们彼此相反。

然而,display属性决定了元素将遵循什么布局规则。对于元素如何在CSS中布局,有几种不同的规则,因此有几种不同的值(块,内联,内联块等-请参阅这里的文档)。

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

所有其他用于显示的值都使元素成为页面的一部分,因此在某种意义上,它们都与显示相反:none。

但是没有一个值是与显示直接相反的:没有——就像没有一种发型是与“秃头”相反的一样。

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

你可以为元素选择hide或unhide。但是一旦你删除它(我的意思是不显示),它就没有明确的相反值。Display有几个值,如Display:block, Display:inline, Display:inline-block和许多其他值。你可以从W3C找到它。

与显示完全相反的是:没有(目前)没有。

但是display: unset非常接近,在大多数情况下都可以工作。

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

unset CSS关键字是初始关键字和继承关键字的组合。像这两个CSS范围的关键字一样,它可以应用于任何CSS属性,包括CSS简写all。如果属性从其父继承,则该关键字将属性重置为其继承值,如果不是其父继承,则将属性重置为其初始值。换句话说,它的行为类似于第一种情况下的继承关键字,而类似于第二种情况下的初始关键字。 (来源:https://developer.mozilla.org/docs/Web/CSS/unset)

还要注意display: revert目前正在开发中。详见MDN。

使用display: revert

来自https://developer.mozilla.org/en-US/docs/Web/CSS/revert上的文档

revert CSS关键字将属性的级联值从其当前值恢复为如果当前样式原点未对当前元素进行任何更改,则属性将具有的值。因此,如果属性从其父继承,则将属性重置为其继承的值,或者将属性重置为用户代理的样式表建立的默认值(如果存在用户样式,则重置为用户样式)。它可以应用于任何CSS属性,包括CSS速记属性all。

它支持所有主流浏览器- https://caniuse.com/css-revert-value