CSS实战笔记(八) 元素隐藏

在 CSS 中，隐藏一个元素有很多种方法，下面我们来一一介绍

1、设置不透明度

opacity: 0;

将元素的不透明度设置为 0，但是这个元素还是会占据原来的位置，只是在视觉上不可见而已

它不会改变页面的布局，还能够响应用户的操作

2、设置可见性

visibility: hidden;

将元素的可见性设置为隐藏，从而使得这个元素是不可见的，但是它仍占据着原来的位置

它不会改变页面的布局，但不能响应用户的操作

另外，这个元素的子孙元素也会被设置为隐藏，但是可以给子孙元素显式设置 visibility 为 visible 取消隐藏

3、设置显示方式

display: none;

这是真正意义上的隐藏元素，它不会占据原来的空间，就好像这个元素本来就不存在一样

这意味着它改变了页面的布局，自然它也不能响应用户的操作

另外，这个元素的子孙元素也会被设置为隐藏

4、设置定位方式

position: absolute;
top: -999px;
left: -999px;

设置元素的定位方式为绝对定位，这样可以使元素脱离文档流

然后设置 left 和 top 为一个较大的负数，将元素移出可见区域，实现元素隐藏

---

最后补充一个属性，overflow，用来规定当内容超出元素框时要怎么处理，可选值如下：

• visible：超出的内容会显示在元素框之外
• hidden：超出的内容会被修剪
• scroll：始终显示滚动条，可以拉动滚动条看到超出的内容
• auto：当内容没有超出元素框时，不显示滚动条 ，当内容超出元素框时，才显示滚动条