元素隐藏的方式有以下几种
1、overflow:hidden
防止溢出,也是一种隐藏,只不过是把超出范围的元素隐藏,这种一般用于文字过多或者图片特效以及自适应中div没法设置高度时使用
2.display:none
设置元素的display为none是最常用的隐藏元素的方法。
.hide {
display:none;
}
这就是完全的隐藏了,直接消失,任何对该元素直接的用户交互操作都不可能生效,被隐藏的元素完全不会占用空间,仿佛元素完全不存在一样。
3、opacity:0
opacity属性表示元素的透明度,而将元素的透明度设置为0后,元素也是隐藏的。
.transparent {
opacity:0;
}
这种方法和visibility:hidden的一个共同点是元素隐藏后依旧占据着空间,设置透明度为0后,元素只是隐身了,它依旧存在页面中,它也同样影响用户交互。在读屏软件中会被识别。
4、position:
元素的定位
.box{
position:absolutely;
top:-4555px;
left:-45545px
}
top和left设置成足够大的负数,相当于把元素放到可视区域外,它不会影响布局,能够让元素保持可操作性,在读屏软件上可以被识别。
5,visibility:hidden
设置元素的visibility为hidden也是一种常用的隐