最常用的两种方式:
- display:none,这种方式可以使元素彻底从文档中删除,会造成浏览器的回流与重绘
- visibility:hidden,元素会从页面中消失,它原本占据的空间会被保留,会造成浏览器的重绘,适用于希望元素隐藏又不影响页面布局的场景,但是该属性会被子元素继承,所以若不希望子元素隐藏,还需在子元素中设置visibility:visible。
不太推荐使用的方法:
- opacity:0
opacity属性表示元素的透明度,而将元素的透明度设置为0后,在我们用户眼中,元素也是隐藏的,这算是一种隐藏元素的方法。但是它仍然存在与页面中。 - 盒模型属性设置为0
如果元素内有子元素或内容,还应该设置其overflow:hidden来隐藏其子元素。
.hiddenBox { margin:0; border:0; padding:0; height:0; width:0; overflow:hidden; }
3.设置元素绝对定位将元素移出屏幕
.box1 { position: absolute; left: 100%; }
4.text-indent,一般首行缩2个中文字的用法是text-indent:2em。但当给他一个足够大的负值,大到我们浏览器无法显示。如text-indent:-999em。