在 CSS 中有以下三种常用的方式来隐藏一个元素：

• display: none;
• visibility: hidden;
• opacity: 0;

display 的方式

display: none; 可以将一个元素完全在页面上隐去，不占据任何空间。

<iframe height="300" style="width: 100%" scrolling="no" title="演示" src="https://codepen.io/3yya/embed/QWOoXZv?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

visibility 的方式

visibility 设置的是元素的可见性，有以下取值：

• visible：默认值，元素正常显示。
• hidden：隐藏元素，仍然占据页面空间。
• collapse：用于 <table> 行、列、列组和行组，隐藏表格的行或列，并且不占用任何空间（与将 display: none 用于表格的行/列上的效果相 当）。

$$tip

visibility: hidden; 与 display: none; 的最大不同是， visibility: hidden; 仍然会占据页面空间，只是元素看不见了。

$$

<iframe height="300" style="width: 100%" scrolling="no" title="演示" src="https://codepen.io/3yya/embed/abVMezM?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

opacity 的方式

opacity 设置的是元素的不透明度，取值范围从 0 ~ 1 之间的数字。 0 表示完全透明， 1 表示完全不透明。

$$tip

opacity: 0; 与 display: none; 的最大不同是， opacity: 0; 仍然会占据页面空间，只是元素看不见了。

$$

<iframe height="300" style="width: 100%" scrolling="no" title="演示" src="https://codepen.io/3yya/embed/WNXmVRd?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>