文档章节

display:none和visibility:hidden的区别?

dong23
 dong23
发布于 2017/09/11 13:27
字数 244
阅读 10
收藏 0
点赞 0
评论 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

表单元素(控件)不可见,你用visibility还是display?

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

Carl_ ⋅ 2014/08/18 ⋅ 0

display:none 和visiablility:hidden 的区别

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

hyz000 ⋅ 2016/11/08 ⋅ 0

overflow、display、visibility的区别?

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

spademan ⋅ 2013/11/01 ⋅ 0

个人笔记1:display与visibility用法

有人会将CSS中的属性display和visibility混淆,他们看似没什么不同,其实区别是很大的。 visibility属性控制定位的元素是否可见,取值包括:visible(可见)、hidden(隐藏)、inherit(继承...

倪九林 ⋅ 2014/07/15 ⋅ 0

爱创课堂每日一题第三十九天- cookie 和session 的区别?

1、cookie数据存放在客户的浏览器上,session数据放在服务器上。 2、cookie不是很安全,别人可以分析存放在本地的COOKIE并进行COOKIE欺骗 考虑到安全应当使用session。 3、session会在一定时...

全栈web笔记 ⋅ 2017/10/25 ⋅ 0

style="visibility: hidden"和 style=“display:none区别

style="visibility: hidden"和 style=“display:none”区别 大多数人很容易将CSS属性display和visibility混淆,它们看似没有什么不同,其实它们的差别却是很大的。 visibility属性用来确定元...

Daniel_s ⋅ 2016/01/31 ⋅ 0

display:none与visibility:hidden的区别。

为了便于理解,我们会使用情感化思维,类比现实,在内心形成只属于自己的具象化的想法。这是很OK的,但是,要知道,事物是具有两面的,具象的东西容易让我们陷入固定思维模式,尤其在现实世界...

小陈同学 ⋅ 2014/03/27 ⋅ 0

CSS 清除浮动

方法一: .cl:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .cl { zoom: 1; / for IE6 IE7 / } 方法二: 1. .clearfloat {clear:bo......

IT追寻者 ⋅ 2016/05/31 ⋅ 0

两种div 隐藏和显示方式的区别

一.方式1:隐藏后仍占有页面空间,显示空白 div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白 style="visibility: none;" document.getElementById("typediv1").style.visi...

谢思华 ⋅ 2014/04/03 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Thrift RPC实战(二) Thrift 网络服务模型

TServer类层次体系 TSimpleServer/TThreadPoolServer是阻塞服务模型 TNonblockingServer/THsHaServer/TThreadedSelectotServer是非阻塞服务模型(NIO) 1 TServer抽象类的定义 内部静态类Args的...

lemonLove ⋅ 6分钟前 ⋅ 0

vim命令用法

第五章 vim命令 vim和vi几乎是一样的,唯一的区别就是当编辑一个文本时,使用vi不会显示颜色,而使用vim会显示颜色。 vim有三个模式:一般模式,编辑模式,命令模式。 系统最小化安装时没有安...

弓正 ⋅ 7分钟前 ⋅ 0

MyBatis源码解读之配置

1. 目的 本文主要介绍MyBatis配置文件解析,通过源码解读mybatis-config.xml(官方默认命名)、Mapper.xml 与Java对象的映射。 2. MyBatis结构 查看大图 MyBatis结构图,原图实在太模糊了,所以...

无忌 ⋅ 11分钟前 ⋅ 0

Ignite的jdbc与网格的连接方式的查询性能对比

环境: 数据量100万 Ignite2.5 Windows10 8g jdbc方式连接 import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import java.sql.ResultSet; i......

仔仔1993 ⋅ 26分钟前 ⋅ 0

收集自网络的wordpress 分页导航的代码教程(全网最全版)

wordpress 分页导航是用来切换文章的一个功能,添加了 wordpress 分页导航后,用户即可自由到达指定的页面数浏览分类文章,而这样的一个很简单功能却有很多朋友在用插件:WP-PageNavi,插件的...

Rhymo-Wu ⋅ 42分钟前 ⋅ 0

微服务 WildFly Swarm 入门

Hello World 就像前面章节中的其他框架一样,我们希望添加一些基本的 Hello-world 功能,然后在其上逐步添加更多的功能。让我们从在我们的项目中创建一个 HolaResources 开始。您可以使用您的...

woshixin ⋅ 49分钟前 ⋅ 0

Maven的安装和Eclipse的配置

1. 下载Maven 下载地址 2. 解压压缩包,放到自己习惯的硬盘中 此处我将其放到了 D:\Tools 目录下。 3. 配置环境变量 右键此电脑 -> 属性 -> 高级系统设置 -> 环境变量。 在系统变量中新建,变...

影狼 ⋅ 56分钟前 ⋅ 0

python pip使用国内镜像的方法

国内源 清华:https://pypi.tuna.tsinghua.edu.cn/simple 阿里云:http://mirrors.aliyun.com/pypi/simple/ 中国科技大学 https://pypi.mirrors.ustc.edu.cn/simple/ 华中理工大学:http://......

良言 ⋅ 57分钟前 ⋅ 0

对于url变化的spa应该如何使用微信jssdk

使用vue单页面碰上微信jssdk config验证失败的坑。第一次成功 之后切换页面全部失败,找到了解决方法,第一次验证成功后保存验证信息 切换页面时验证信息直接拿来用,加一个wx.error() 失败时...

孙冠峰 ⋅ 今天 ⋅ 0

Spring Cloud Gateway 一般集成

SCF发布,带来很多新东西,不过少了点教程,打开方式又和以前的不一样,比如这个SCG,压根就没有入门指导,所以这里写一个,以备后用。 一、集成 pom.xml <dependency> <groupI...

kut ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部