文档章节

display:none和visibility:hidden的区别?

dong23
 dong23
发布于 2017/09/11 13:27
字数 244
阅读 25
收藏 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和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
overflow、display、visibility的区别?

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

spademan
2013/11/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

区块链入门教程以太坊源码分析ethdb源码分析

兄弟连区块链入门教程以太坊源码分析ethdb源码分析,2018年下半年,区块链行业正逐渐褪去发展之初的浮躁、回归理性,表面上看相关人才需求与身价似乎正在回落。但事实上,正是初期泡沫的渐退...

兄弟连区块链入门教程
16分钟前
1
0
Eclipse下忽略掉node_modules目录相关配置

https://blog.csdn.net/yzf913214/article/details/72872523

张宏亮1982
17分钟前
1
0
在Python-dataframe中如何把出生日期转化为年龄?

我们在做数据挖掘项目或大数据竞赛时,如果个体是人的时候,获得的数据中可能有出生日期的Series,举个简单例子,比如这样的一些数: # -*- coding: utf-8 -*- import pandas as pd from ...

Mr_zebra
20分钟前
1
0
Android入门—activity生命周期

activity生命周期如下所示: onCreate()方法 创建activity时使用onStart()方法 当activity界面变为用户可见时调用onResume()方法 当activity界面获取到焦点时调用(界面按钮可点击,...

haoyuehong
22分钟前
1
0
使用C++ Builder 6编译产生错误

错误提示: [C++ Error] E2075 Incorrect project override option: Files\Borland\CBuilder6\lib\vcl60.csm[C++ Error] E2075 Incorrect project override option: Files\Borland\CBuilde......

simpower
24分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部