文档章节

display:none和visibility:hidden的区别?

dong23
 dong23
发布于 2017/09/11 13:27
字数 244
阅读 52
收藏 0

1,display:none会让元素从渲染树中消失,渲染的时候不占据任何空间;visibility:hidden不会让元素从渲染树中消失,渲染的时候仍然占据空间,只是内容不可见。
2,display:none是非继承属性,子孙节点消失是由于元素从渲染树中消失造成,通过修改子孙节点的属性无法显示;visibility:hidden是继承属性,子孙节点消失是由于继承了hidden,通过设置visibility:visible,可以让子孙节点显示。
3,读屏器不会读取display:none的元素内容,而会读取visibility:hidden的元素内容。

demo:

<p>可以自己试试哦,一目了然。 </p>

<div id=d1 style='background:red;width:30px;height:30px'></div>

<div id=d2 style='background:yellow;width:30px;height:30px;visibility:hidden'></div>

<div id=d3 style='background:red;width:30px;height:30px'></div>

<div id=d4 style='background:red;width:30px;height:30px;display:none'></div>

<div id=d5 style='background:red;width:30px;height:30px'></div>

© 著作权归作者所有

共有 人打赏支持
dong23
粉丝 0
博文 10
码字总数 1763
作品 0
私信 提问
CSS display:none和visibility:hidden区别

你知道CSS display:none和visibility:hidden的区别吗,这里和大家分享一下,使用CSS display:none属性后,HTML元素(对象)的宽度、高度等各种属性值都将“丢失”;而使用visibility:hidden属...

随智阔
2013/02/27
0
0
表单元素(控件)不可见,你用visibility还是display?

display和visibility混淆,它们看似没有什么不同,其实它们的差别却是很大的。在做表单元素不可见上,你用你用visibility还是display?本文给你讲解。 AD: 本节通过向大家描述display和vis...

Carl_
2014/08/18
0
0
overflow、display、visibility的区别?

Overflow:hidden 对行内元素无效,必须是块级元素,并且设置宽度高度。 Overflow:hidden,隐藏之后元素依然占据着位置。 Display:none 使用此属性之后元素不存在了,元素占据的位置也不存在。...

spademan
2013/11/01
0
0
display:none和visibility:hidden的区别

display:none和visibility:hidden的区别 display:none:隐藏对应的元素,在文档布局中不再给它分配空间,它各边的元素会合拢, 就当他从来不存在。 visibility:hidden:隐藏对应的元素,但是在...

宋春敏
2017/11/05
0
0
display:none 和visiablility:hidden 的区别

display:none和visible:hidden都能把网页上某个元素隐藏起来,但两者有区别: 区别一: display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失,通俗来说就是看不见也摸...

IrisHuang
2016/11/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

nginx的内容

1、nginx 稳定,由俄国人开发, nginx.org 分支: tengine,由淘宝开发; tengine.taobao.com nginx的功能:http服务, 负载均衡 反向代理 邮件代理 缓存加速 SSL, 功能完善;高并发 可以用来处理...

芬野de博客
23分钟前
0
0
websocket 接口简单测试工具,webcoket实用测试工具

chorme 插件 Simple WebSocket Client 对开发来说够用了,能连互联网,也能连本地的。 之前用jmeter 带复杂了,而且登录不好弄,这个基于浏览器,共享浏览器的登录信息。方便!...

SimonAt
29分钟前
3
0
Ext中 get、getDom、getCmp的区别

getDom方法能够得到文档中的DOM节点,该方法中包含一个参数,该参数可以是DOM节点的id、DOM节点对象或DOM节点对应的Ext元素(Element)等。 (与getElementById是一个效果) •Ext.onReady(funct...

休辞醉倒
36分钟前
1
0
springboot jpa 访问数据库

spring boot(五):spring data jpa的使用 SpringBoot非官方教程 | 第三篇:SpringBoot用JdbcTemplates访问Mysql

颖辉小居
51分钟前
4
0
Quartz + Oracle 分布式Job实现

简述 实现 依赖包 <dependency><groupId>org.quartz-scheduler</groupId><artifactId>quartz</artifactId><version>2.2.3</version><exclusions><exclusion><groupId>com.zax......

呼呼南风
57分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部