css之10种隐藏元素的方法

1、通过设置width:0;或height:0;

div{width:0;}或div{height:0;}
但是这种方法隐藏不了文字。如果还想把文字隐藏可以，

div{font-size:0;}

2、将元素的opacity设置为0。元素本身还在，只是透明了，所以该元素所占的位置将不会改变。

div{opacity:0;}

3、用定位或者margin将元素移除屏幕范围。

div{ position:absolute; left:-9999px; }或 div{ margin-left:-9999px; }

4、通过text-indent实现隐藏文字的效果。这种效果类似将元素移除屏幕范围

div{text-indent:-9999px;}

5、通过z-index隐藏一个元素

<style type="text/css">
p {
    background-color:#fff;
    position:absolute;
    left:0;
    top:0;
    }
.one{z-index:-1;}
.t{z-index:1;}
</style>
<body>
<p class="one">这是</p>
<p class="t">擦擦</p>
</body>

实现这种效果的前提是需要有个背景颜色（白色也行），就是不能为透明，否则两个文本将会重叠。

6、通过visibility将元素设置为不可见，但是在页面还是会占据位置，和opacity效果类似。

div{visibility:hidden;}

7、通过display将元素彻底隐藏，并且不会占位置

div{display:none;}

8、将背景设为透明，字体大小设置为0。虽看不到，但是仍占位置

div{
    font-sizee:0;
    background-color:transparent;
}

9、通过transform的translate函数隐藏一个元素，

div{transform：translate(-9999px);}
这个原理就是讲元素移除屏幕。

10、如果元素超出所设置宽、高，溢出的部分可以用overflow来隐藏。

div{overflow:hidden;}
同样的文本也有溢出隐藏的属性。

div{text-overflow:ellipsis;} //当字符超过7个，7个之后的文字将会被隐藏。

css之10种隐藏元素的方法

猜你喜欢