文档章节

display:none和visibility:hidden的区别?

dong23
 dong23
发布于 2017/09/11 13:27
字数 244
阅读 280
收藏 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
私信 提问
加载中
请先登录后再评论。
HTML中visibility:hidden 和 display:none 的区别及实例?

HTML中visibility:hidden 和 display:none 的区别及实例? visibility:hidden 和 display:none 的区别 都是隐藏 但是visibility:hidden隐藏以后还会继续保留位置 display:none 隐藏以后就不...

osc_nmo72btw
2019/05/30
2
0
CSS display:none和visibility:hidden区别

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

BearCatYN
2014/05/15
20
0
CSS display:none和visibility:hidden区别

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

随智阔
2013/02/27
45
0
HTML中visibility:hidden 和 display:none 的区别及实例?

visibility:hidden 和 display:none 的区别 都是隐藏 但是visibility:hidden隐藏以后还会继续保留位置 display:none 隐藏以后就不会占位置 关于display:none 隐藏如下实例的 <!DOCTYPE ht...

osc_hpzuj4e3
2019/05/29
1
0
浅谈:{display:none & visibility:hidden}

据说今年前端面试中,出现了很多次关于display:none与visibility:hidden区别的题目。不仅仅是 在前端工作中也有很多的坑,例如: 像这样很基础的问题也许就是考验一个程序员的基础能力和扩...

Jack-Html5
2018/03/21
39
0

没有更多内容

加载失败,请刷新页面

加载更多

插入,在PostgreSQL中重复更新吗? - Insert, on duplicate update in PostgreSQL?

问题: Several months ago I learned from an answer on Stack Overflow how to perform multiple updates at once in MySQL using the following syntax: 几个月前,我从关于堆栈溢出的答案......

技术盛宴
56分钟前
38
0
互联网的寒冬下各大一线互联网公司还在用SpringBoot这是为什么?

引言 现在各大技术社区 Spring Boot 的文章越来越多,Spring Boot 相关的图文、视频教程越来越多,使用 Spring Boot 的互联网公司也越来越多; Java 程序员现在出去面试, Spring Boot 已经成...

北柠Java
59分钟前
8
0
vue+elementui实现简易的列筛选功能实现。

一、简易效果图: 二、需求背景 大家都知道,后管类系统当中,有时一个列表可能有很多列需要展示,如下图所示,但是用户在使用系统的时候,往往会需要针对其中某几列进行数据提取,在展示列比...

一生懸命吧
今天
60
0
批处理问题记录——数字实验bat

记录学习批处理时的问题 批处理为输入一个数字,如果大于等于一百,直接输出输入数字,如果小于一百会重复+1,直到100后输出。 问题是,如果不输入数字,直接空格的话,批处理会出错。 寻求一...

愤怒的乌老大
今天
6
0
算法题汇总

计算两个字符串中的最大的相同字符串

佳幂小煜
今天
27
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部