CSS Display与Visibility区别和用法
CSS Display与Visibility区别和用法
CSS属性display和visibility容易混淆,visibility和display两个属性都有隐藏元素的功能。visibility属性所控制的元素虽然不在浏览器里面显示出来,但他在浏览区里是存在的,只是不显示而已。而display属性设置为none,这个元素就变成了一个不显示的元素。
一、Display的属性值
block:表现为一个块级元素(一般情况下独占一行)
当display被设置为block(块)时,容器中所有的元素将会被当作一个单独的块,就像
inline:表现为一个行级元素(一般情况下不独占一行)
将display设置为inline,将使其行为和元素inline一样—即使它是普通的块元素如
none:元素不可见,并且不为其保留相应的位置
最后是display被设置:none,这时元素实际上就从页面中被移走,它下面所在的元素就会被自动跟上填充。
二、Display的使用
1、display默认属性值为块级的元素:
adress,quote,body,xmp,center,col,colgroup,dd,dtr,div,
dl,dt,fieldset,form,hn,hr,iframe,legend,listing,marquee,
menu,ol,p,plaintext,pre,table,td,th,tr,ul
2、display默认属性值为none的元素:
br,frame,nextid,tbody,tfoot,thead
3、li元素的display属性默认值为:list-item
4、其他元素display属性默认值都为inline
三、Display的特性
改变元素的display属性将对周围元素造成的影响有:
1、在属性值设为block的元素后面添加新行。
2、从属性值设为inline的元素所在行中删除一行。
3、隐藏属性值设为none的元素并且释放该元素在文档中所占的物理空间,对于其他元素来说,相当于该元素不存在,因此,该元素的位置被其他元素顶替。
四、visibility的属性值
visibility:visible 元素可见,默认值。
visibility:hidden 元素不可见,但仍然为其保留相应的空间。
visibility:collapse 只对table对象起作用,能移除行或列但不会影响表格的布局。如果这个值用在table以外的对象上则表现为hidden。
visibility:inherit 继承上级元素的visibility值。
五、visibility特性
用来确定元素是显示还是隐藏,这用visibility="visible|hidden"来表示,visible表示显示,hidden表示隐藏。当visibility被设置为"hidden"的时候,元素虽然被隐藏了,但它仍然占据它原来所在的位置。
Visibility:none 和 Display:hidden 的区别
display:none;
使用该属性后,HTML元素(对象)的宽度、高度等各种属性值都将“丢失”。
visibility:hidden;
使用该属性后,HTML元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置仍然存在,也即是说它仍具有高度、宽度等属性值。
七、什么时候使用Visibility或者Display属性?
Visibility和Display属性虽然都可以达到隐藏页面元素的目的,但它们的区别在于如何回应正常文档流。
如果你想隐藏某元素,但在页面上保留该元素的空间的话,你应该使用visibility:hidden。如果你想在隐藏某元素的同时让其它内容填充空白的话应该使用display:none。
在现实中我(作者)更多的倾向于使用display属性(相信这也是大多数人的习惯,bolo注)。当你决定用display:none来隐藏一个元素时,你必须知道其它内容将填充到该元素留下的空白位置,从而改变页面的布局。
八、使用Visibility或者Display属性的注意事项
display:none:
1、JS读取元素属性值
如果在样式文件或页面文件代码中直接用display:none对元素进行了隐藏,载入页面后,在没有通过js设置样式使元素显示的前提下,使用js代码会无法正确获得该元素的一些属性,比如:offSetTop,offSetLeft等,返回的值会为0,通过js设置style.display来使元素显示后才能正确获得这些值。
2、SEO优化时需要注意
使用display:none隐藏的元素不会被百度等搜索网站检索,会影响到网站的SEO,某些情况下可以使用left:-100000px来达到同样效果。
3、样式文件
如果是通过样式文件或方式来设置元素的display:none样式,用js设置style.display=""并不能使元素显示,可以使用block或inline等值来代替。通过style="display:none"直接在元素上进行的设置不会有这个问题。
4、有些情况下可以使用style.visibility来代替style.display,但是要注意的是style.visibility隐藏元素时会保留元素在页面上所占的空间,而style.display隐藏元素且让出所占页面空间。
visibility:hidden:
如果想让某一段代码在前台不显示,最简单的方法是用css的display:none,这样,下边的内容就自动填补这个空隙。但是在一些特殊的情况下,我们只需要隐藏这个元素,但它的位置不能被占用了,那么,visibility:hidden就可以实现这个要求。
CSS Display与Visibility区别和用法相关推荐
- css = display: none, visibility: hidden, opacity: 0 的区别
一. 页面结构 display: "none" 的元素其实并不会渲染,不会出现在页面中,不会占据位置,切换"显隐"时会触发渲染,所以会影响性能. visibil ...
- Csss属性display,visibility区别,对渲染页面的影响
display: none; 与 visibility: hidden; 的区别 相同: 它们都能让元素不可见 区别:display:none;会让元素完全从渲染树中消失,渲染的时候不占据任何空间: ...
- 【css】css display属性的值及用法
浏览器支持 表格中的数字注明了完全支持该属性的首个浏览器版本. 如果规定了 !DOCTYPE,则 Internet Explorer 8 (以及更高版本)支持属性值 "inline-tabl ...
- display与visibility区别
visibility: hidden----将元素隐藏,但是在网页中该占的位置还是占着. $("#").style.visibility="hidden"; $ ...
- CSS隐藏元素的几种方式以及display、visibility、opacity的区别
CSS隐藏元素的方式 首先最通用且最易想到的方法肯定是display.visibility和opacity这三种了 display:none 设置元素不可见并且连盒模型也不生成,一般用于不占空间的隐藏 ...
- visibility: hidden与display:none的区别
要想了解visibility: hidden与display:none的区别,我们还是先来看看他们各自的定义及用法. visibility属性 定义: visibility 属性规定元素是否可见 说明 ...
- 【重识 HTML + CSS】元素类型、display、visibility、overflow
元素类型 元素类型 块级.行内级元素 替换.非替换元素 元素的分类总结 CSS 属性 - display inline-block 练习 - 邮箱显示与选择 练习 - 分页跳转栏 display 的其 ...
- CSS display(显示)详解 与 visibility(可见性)详解[第七天]
文章目录 display list-item[无效果,懵逼] run-in[都不支持,忽略] initial content table visibility 隐藏元素(display:none/vi ...
- display和visibility的用法和区别
大多数人很容易将CSS属性display和visibility混淆,它们看似没有什么不同,其实它们的差别却是很大的.visibility和display两个属性都有隐藏元素的功能.visibility ...
最新文章
- 如何对以破折号/连字符开头的字符串进行grep?
- linux 环境变量LD_PRELOAD简介 定义优先加载的动态链接库
- 免费CDN加速隐藏你的服务器原ip以防别人攻击
- JavaScript高级部分概念用法
- MyBatis(六)SqlSessionTemplate是如何保证线程安全的
- 关于WCF中间层服务器端DTO属性更新如何同步回仓储实体的处理方式
- QComboBox样式
- 如何修改网页中的文本内容改成自己希望的数值?
- 阿里云服务器18个数据中心测试IP地址以及测试方法
- Visual Studio 2008 每日提示(一)
- abaqus结构工程分析及实例详解pdf_“结构非线性、材料拟合、冲击碰撞、钣金/金属成形、顺序耦合、多物理场、有/非参优化”专题...
- zw版_zw中文增强版Halcon官方Delphi例程
- 关于ccflow工作流引擎报表查询权限升级的更新
- apkg格式怎么打开_干货:pdf转换器简单、好用,还能在线互转文件格式!
- 小程序:解析h5标签
- Contect Me
- C++stl翁恺老师笔记
- php 验证码数字英文的,PHP 创设扭曲英文验证码
- C# 程序间通信的各种途径及解析
- java中BOM是什么_javaScript中BOM
热门文章
- 万能密码为什么能成功
- 如何在Hi3559A上运行自己的YOLOv3模型
- 我们认为2是第一个素数,3是第二个素数,5是第三个素数,依次类推。 现在,给定两个整数n和m,0<n<=m<=200,你的程序要计算第n个素数到第m个素数之间所有的素数的和,包括第n个素数和第m个素
- Serial.print()和Serial.write()的区别
- 加权平均资本成本【读书笔记】
- Box2d源码学习十三b2Collision之碰撞(下) 具体形状间的碰撞的实现
- sprintf与snprintf区别
- Android P2P 通信方案探索
- IDEA添加Java类注释模版
- dlopen failed: couldn‘t map “/data/xxxx.so“ segment 1: Permission denied