登录  /  注册
首页 > web前端 > css教程 > 正文

css隐藏元素的方式有哪些

青灯夜游
发布: 2021-09-13 17:19:08
原创
12891人浏览过

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

css隐藏元素的方式有哪些

本教程操作环境: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视频教程

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

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号