通过CSS隐藏元素的可能方法是什么

What are the possible ways to hide an element via CSS

本文关键字：方法 是什么 CSS 隐藏 元素 通过      更新时间：2023-09-26

我试图用CSS隐藏一个HTML元素。

<select id="tinynav1" class="tinynav tinynav1">

但它非常有弹性，即使使用 Google Inspect 元素，我也无法更改样式。

很简单

，只需在 CSS 中将 display 属性设置为 none：

#tinynav1
{
  display:none
}

再次，当您想显示它时，将display设置为 block .

visibility: hidden隐藏元素，但它仍然占用布局中的空间。

display: none从文档中完全删除该元素。它不占用任何空间，即使它的 HTML 仍在源代码中。

使用display的其他优点：

display:none意味着有问题的元素根本不会出现在页面上（尽管您仍然可以通过 DOM 与之交互）。 在其他元素之间不会为其分配空间。
visibility:hidden意味着与display:none不同，该元素不可见，但在页面上为其分配了空间。

使用display:none;或visibility:hidden;

CSS：

select#tinynav1  { display: none; }

或者，如果应隐藏多个选择，请使用相应的类：

select.tinynav1  { display: none; }

作为内联样式，您也可以这样做（您可以尝试检查器）：

<select id="tinynav1" style="display: none">

您可以使用 display:none 或 visibility:hidden ，具体取决于您的要求：

#tinynav{display:none;}

或 

 #tinynav{visibility:hidden;}

请参阅以下 URL 以更好地了解display:none和visibility:hidden。

"

显示：无"和"可见性：隐藏"之间的区别

如果要

隐藏它并折叠所需的空间，请使用display: none;如果要保留空间，请使用visibility: hidden。

<select id="tinynav1" class="tinynav tinynav1">

.CSS

.tinynav {
    display: none;
}

直接在<select>上使用style="display:none"或创建具有该设置的 css 类并将该类分配给<select>。

使用此 CSS

.tinynav {
    display: none;
}

或

.tinynav {
    visibility: hidden;
}

不同之处在于，前者将使select根本不呈现，后者会使select呈现（它将占用文档的空间），但它将完全不可见;

这里有一个小提琴来显示差异：http://jsfiddle.net/rdGgn/2/
您应该注意到第三行文本之前有一个空白区域。它是呈现但不可见的选择。第二行文本之前没有空格，因为选择根本不呈现（它有display:none）。

还有第三种选择

.tinynav {
    opacity: 0;
}

它的行为与visibility: hidden几乎相同，但唯一的区别是，使用opacity: 0您仍然可以单击选择。使用visibility: hidden它将被禁用。

相关文章：