• 技术文章 >web前端 >css教程

    css隐藏元素的方式有哪些

    青灯夜游青灯夜游2021-09-13 17:19:08原创138

    方式:1、设置“display:none”语句;2、设置“visibility:hidden”语句;3、设置“opacity:0”语句;4、设置盒模型属性为0;5、利用“position:absolute;top:-9999px;”语句。

    本教程操作环境:windows7系统、CSS3&&HTML5版、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后,元素只是隐身了,它依旧存在页面中。

    设置height,width等盒模型属性为0

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

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

    这种方式既不实用,也可能存在着着一些问题。但平时我们用到的一些页面效果可能就是采用这种方式来完成的,比如jquery的slideUp动画,它就是设置元素的overflow:hidden后,接着通过定时器,不断地设置元素的height,margin-top,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隐藏元素的方式有哪些的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:css 隐藏元素
    上一篇:css如何让字改变透明度 下一篇:css中如何设置元素宽度
    线上培训班

    相关文章推荐

    • css如何设置标题阴影边框• html/css怎么设置背景图片居中• 让网站更酷炫的CSS filter使用小技巧,值得收藏!• css中如何将行元素转为块元素,块元素转为行元素• css如何让字改变透明度

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网