前言
在 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:当内容没有超出元素框时,不显示滚动条 ,当内容超出元素框时,才显示滚动条