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

时间：2020-07-05 21:13:28 阅读：91 评论：0 收藏：0 [点我收藏+]

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。

原文地址：https://www.cnblogs.com/qinglaoshi/p/13251548.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

周排行