css隐藏元素的方式有哪些

方式：1、设置“dis play :none”语句；2、设置“visibil IT y:hidden”语句；3、设置“opacity:0”语句；4、设置 盒模型 属性为0；5、 利用 “position:absolute;top:-9999px;”语句。

本教程操作环境：windows7系统、CSS3 && HT ML 5版、Dell G3 电 脑。

css隐藏元素的方式

display:none

设置元素的display为none是最常用的隐藏元素的方法。

.hide {
    display:none;
}

将元素设置为display:none后，元素在页面上将彻底 消失 ，元素本来占有的空间就会被其他元素占有，也就是说它会导致浏览器的 重排 和重绘。

visibility:hidden

设置元素的visibility为hidden也是一种常用的隐藏元素的方法，和display:none的区别在于，元素在页面消失后，其占据的空间依旧会保留着，所以它只会导致浏览器重绘而不会重排。

.hidden{
   visibility:hidden
}

visibility:hidden适用于那些 元素隐藏 后不希望页面布局会发生变化的场景

opacity:0

opacity属性我相信大家都 知道 表示元素的透明度，而将元素的透明度设置为0后，在我们用户眼中，元素也是隐藏的，这算是一种隐藏元素的方法。

.transparent {
     opacity:0;
}

这种方法和visibility:hidden的一个共同点是元素隐藏后依旧占据着空间，但我们都知道，设置透明度为0后，元素只是隐身了，它依旧存在页面中。

设置h ei ght，width等盒模型属性为0

这是我总结的一种比较奇葩的技巧， 简单 说就是将元素的m arg in，border，padding，height和width等影响元素盒模型的属性设置成0，如果元素内有子元素或内容，还 应该 设置其overflow:hidden来隐藏其子元素，这算是一种奇技淫巧。

.hiddenBox {
    mar gin :0;
    border:0;
    padding:0;
    height:0;
    width:0;
    overflow:hidden;
}

这种方式既不实用，也可能存在着着一些问题。但平时我们用到的一些页面效果可能就是采用这种方式来完成的，比如 jq uery的slideUp动画，它就是设置元素的overflow:hidden后，接着通过定时器， 不断 地设置元素的height，margin -t op，margin-bottom，border-top，border-bottom，padding-top，padding-bottom为0，从而达到slideUp的效果。

position: absolute，设置元素隐藏

span{
	position: absolute;
	top: -9999px;
   	left: -9999px;
}

position: absolute，设置元素隐藏的主要原理是通过将元素的 top 和 left 设置成足够大的负数，使它在屏幕上不可见。

以上就是css隐藏元素的方式有 哪些 的详细内容，更多请关注其它相关 文章 ！

总结

以上是 为你收集整理的 css隐藏元素的方式有哪些 全部内容，希望文章能够帮你解决 css隐藏元素的方式有哪些 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于css隐藏元素的方式有哪些的详细内容...