让一个元素“看不见”的方式及区别

Posted 2020-12-14 青老师

最常用的两种方式：

1. display：none，这种方式可以使元素彻底从文档中删除，会造成浏览器的回流与重绘
2. visibility：hidden，元素会从页面中消失，它原本占据的空间会被保留，会造成浏览器的重绘，适用于希望元素隐藏又不影响页面布局的场景，但是该属性会被子元素继承，所以若不希望子元素隐藏，还需在子元素中设置visibility：visible。

不太推荐使用的方法：

1. opacity：0
   opacity属性表示元素的透明度，而将元素的透明度设置为0后，在我们用户眼中，元素也是隐藏的，这算是一种隐藏元素的方法。但是它仍然存在与页面中。
2. 盒模型属性设置为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。