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

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

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


当前回答

使用display: revert

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

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

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

其他回答

我使用 显示:块; 这对我很有用

你可以使用这个display:block;并同时添加overflow:hidden;

使用display: revert

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

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

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

你可以使用display: block

例子:

<!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> 

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

/* 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!