1. CSS 基础

  2. 取值单位

  3. 外观样式

  4. 布局样式

  5. 动画样式

  6. 工具与规范

  7. 实例练习

在 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:默认值,元素正常显示。
  • hiddent:隐藏元素,仍然占据页面空间。
  • 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>