display:none和visibility:hidden的区别
在使用CSS隐藏一些元素时,我们经常用到 display:none 和 visibility:hidden。两者差别如下:
1. 是否占据空间
display:none,该元素不占据任何空间,在文档渲染时,该元素如同不存在(但依然存在文档对象模型树中)。
visibility:hidden,该元素空间依旧存在。
即一个(display:none)不会在渲染树中出现,一个(visibility :hidden)会。
2. 是否渲染
display:none,会触发reflow(回流),进行渲染。
visibility:hidden,只会触发repaint(重绘),因为没有发现位置变化,不进行渲染。
3. 是否是继承属性
display:none,display不是继承属性,元素及其子元素都会消失。
visibility:hidden,visibility是继承属性,若子元素使用了visibility:visible,则不继承,这个子孙元素又会显现出来。
4. 读屏器是否读取
读屏器不会读取display:none的元素内容,而会读取visibility:hidden的元素内容。
案例
使用css让元素不可见的方法有很多种,裁剪、定位到屏幕外边、透明度变换等都是可以的。但是最常用两种方式就是设置元素样式为display: none或者visibility: hidden。很多公司的面试官也常常会问面试者这两者之间的区别。
display与元素的隐藏
如果给一个元素设置了display: none,那么该元素以及它的所有后代元素都会隐藏,它是前端开发人员使用频率最高的一种隐藏方式。隐藏后的元素无法点击,无法使用屏幕阅读器等辅助设备访问,占据的空间消失。
<body><div><strong>给元素设置display:none样式</strong><p>A元素</p><p style='display:none;'>B元素</p><p>C元素</p></div>
</body>
visibility与元素的隐藏
给元素设置visibility: hidden也可以隐藏这个元素,但是隐藏元素仍需占用与未隐藏时一样的空间,也就是说虽然元素不可见了,但是仍然会影响页面布局。
display: none与visibility: hidden的区别
很多前端的同学认为visibility: hidden和display: none的区别仅仅在于display: none隐藏后的元素不占据任何空间,而visibility: hidden隐藏后的元素空间依旧保留 ,实际上没那么简单,visibility是一个非常有故事性的属性
1、visibility具有继承性,给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别
2、visibility: hidden不会影响计数器的计数,如图所示,visibility: hidden虽然让一个元素不见了,但是其计数器仍在运行。这和display: none完全不一样。
<body><div><strong>给元素设置visibility:hidden样式</strong><ol><li>元素1</li><li style="visibility:hidden;">元素2</li><li>元素3</li><li>元素4</li></ol></div><div><strong>给元素设置display:none样式</strong><ol><li>元素1</li><li style="display:none;">元素2</li><li>元素3</li><li>元素4</li></ol></div></body>
3、CSS3的transition支持visibility属性,但是并不支持display,由于transition可以延迟执行,因此可以配合visibility使用纯css实现hover延时显示效果。提高用户体验。
display:none和visibility:hidden的区别相关推荐
- [css] 说说display:none和visibility:hidden的区别
[css] 说说display:none和visibility:hidden的区别 display:none dom对象不渲染. visibility:hidden 隐藏但是dom对象渲染. 个人简介 ...
- _blank 和 _self的区别以及display:none和visibility:hidden的区别
_blank 和 _self的区别 target=_blank会在当前窗口之外再打开一个新窗口来显示新的页面 target=_self在当前窗口打开新页 面 display:none和visibili ...
- display:none;与visibility:hidden;的区别
display:none;不会占用任何空间 visibility:hidden;会占用隐藏前的空间大小 转载于:https://www.cnblogs.com/yaser/p/4414825.html
- display:none和visibility:hidden两者的区别
使用css让元素不可见的方法有很多种,裁剪.定位到屏幕外边.透明度变换等都是可以的.但是最常用两种方式就是设置元素样式为display: none或者visibility: hidden.很多公司的面 ...
- display:none与visible:hidden的区别
display:none和visible:hidden都能把网页上某个元素隐藏起来,但两者有区别: display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失,通俗来说就 ...
- v-show和v-if的区别 display:none和visible: hidden的区别
1.v-show 和 v-if 在隐藏一个元素的时候有什么不同, 应该如何来选择?** v-show 显示内容 本质就是通过设置 css 中的 display 设置为 none,控制隐藏 v-if 显 ...
- CSS隐藏属性display:none;visibility:hidden;overflow:hidden
前端CSS元素隐藏的知识(display:none:visibility:hidden:overflow:hidden:opacity: 0) 欢迎来到CSS隐藏属性界面 你好! 可以仔细阅读这篇文章 ...
- display:none和visibility:hidden的qubie
隐藏元素 - display:none或visibility:hidden 隐藏一个元素可以通过把display属性设置为"none",或把visibility属性设置为" ...
- display:none和visibility:hidden和透明度的区别
**当想实现一个区域或者内容的消失(隐藏)**,我们有多种代码可以实现.但是根据要求和用户体验,应该选择最合适的方法实现.代码中最常用的代码包括:display:none; visibility:hi ...
最新文章
- log4j打印mybatis sql语句
- 展讯camera去除尺寸相关缓存
- HTML5 Web app开发工具Kendo UI Web中Grid网格控件的使用
- sleep( ) 和 wait( ) 的这 5 个区别,你知道几个
- 将SSM架构中原来关于springSecurity3.x版本的写法配迁移到SpringBoot2.0框架中出现的问题解决记...
- C# 应用Excel条件格式(一)
- 20191022:(leetcode习题)山脉数组的峰顶索引
- MySQL Performance Schema
- Python项目部署到Docker的完整过程
- Keras深度学习实战(7)——卷积神经网络详解与实现
- wget 覆盖文件下载的技巧,绝对有效
- android录屏代码(录屏并生成mp4文件)
- Excerpt-16 March, 2019
- python基础-文本对齐(居中,左对齐,右对齐)
- python 实现证件照换底
- 五、settings 文件
- Linux源码编译安装步骤及命令
- 游综宅2021最新天下布魔下载渠道 Tenkafu MA下载官网地址
- 新版H5微信网页JS-SDK自定义分享功能实现
- GK2A 火点提取运行需要要的包安装