笔者在很多面试题上,都会有这个问题。就总结了几种常用的隐藏方式。
opacity:设置透明度,值为0-1。为0则页面上不显示,但是元素还在那个位置,依然可以网页交互,单纯是看不到而已。
.class{
opacity:0;
}
visibility:设置隐藏。hidden为隐藏,在页面不显示,交互效果也会没有。visible为显示,
.class{
visibility:hidden;//隐藏
visibility:visible;//显示
}
display:设置不显示和显示。注意了,这里要强调的一点是,如果你想使他的子元素显示,用display:visible是没用的。而上面两种方式是可以使用。
.class {
display:none;
}
position位置,把他绝对定位了 挪到远远地。
.class{
position:absolutely;
left:-999px;
top:-999px;
}