文档章节

display:none和visibility:hidden的区别?

dong23
 dong23
发布于 2017/09/11 13:27
字数 244
阅读 12
收藏 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
display:none 和visiablility:hidden 的区别

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

IrisHuang
2016/11/08
0
0
display:none和visibility:hidden的区别

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

宋春敏
2017/11/05
0
0
overflow、display、visibility的区别?

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

spademan
2013/11/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

java并发备忘

不安全的“先检查后执行”,代码形式如下: if(条件满足){ //这里容易出现线程安全问题//doSomething}else{//doOther} 读取-修改-写入 原子操作:使用CAS技术,即首先从V中读取...

Funcy1122
今天
0
0
SpringBoot2.0 停机

最近新建了个SpringBoot2.0的项目,因为原来一直使用的是传统的Tomcat部署war包的形式,所以这次SpringBoot内置Tomcat部署jar包的时候遇到了很多问题。其中一个就是因为没有外置的Tomcat容器...

Canaan_
昨天
0
1
Confluence 6 外部参考

一个外部参考的意思是任何站点链接到你 Confluence 的实例。任何时候当 Confluence 的用户单击这个外部链接的时候,Confluence 可以记录这次单击为参考。 在默认的情况下,外部链接的参考链接...

honeymose
昨天
0
0
Android中的设计模式之抽象工厂模式

参考 《设计模式解析》 第十一章 Abstract Factory模式 《设计模式:可复用面向对象软件的基础 》3.1 Abstract Factory 抽象工厂 对象创建型模式 《Android源码设计模式解析与实战》第6章 创...

newtrek
昨天
0
0
Redis | 地理空间(GEO)的一个坑

Redis的地理空间(Geo)是个好东西,轻轻松松的就可以把地图描点的问题处理了, 最近却遇到一个坑...Redis采用的Msater-Slave模式, 运用GEORADIUS在salve读取对应的数据,新增了从节点但是从不返...

云迹
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部