What is the difference between visibility:hidden and display:none?
What is the difference between visibility:hidden and display:none?
答案1
display:none
means that the tag in question will not appear on the page at all (although you can still interact with it through the dom). There will be no space allocated for it between the other tags.
visibility:hidden
means that unlike display:none
, the tag is not visible, but space is allocated for it on the page. The tag is rendered, it just isn't seen on the page.
For example:
test | <span style="[style-tag-value]">Appropriate style in this tag</span> | test
Replacing [style-tag-value]
with display:none
results in:
test | | test
Replacing [style-tag-value]
with visibility:hidden
results in:
test | | test
Notes:
It's important to keep css-transitions into mind when talking about visibility vs. display. For example, toggling from visibility: hidden; to visibility: visible; allows for css-transitions to be used, whereas toggling from display: none; to display: block; does not. visibility: hidden has the additional benefit of not capturing javascript events, whereas opacity: 0; captures events.
答案2
They are not synonyms同义词.
display:none
removes the element from the normal flow of the page, allowing other elements to fill in.
visibility:hidden
leaves the element in the normal flow of the page such that is still occupies space.
Imagine you are in line for a ride at an amusement park and someone in the line gets so rowdy that security plucks them from the line. Everyone in line will then move forward one position to fill the now empty slot. This is like display:none
.
Contrast this with the similar situation, but that someone in front of you puts on an invisibility cloak. While viewing the line, it will look like there is an empty space, but people can't really fill that empty looking space because someone is still there. This is like visibility:hidden
.
What is the difference between visibility:hidden and display:none?的更多相关文章
- 再谈visibility:hidden和display:none
之前写过一篇有关visibility:hidden和display:none的文章:为什么要用用visibility:hidden;代替display:none;?主要是从浏览器性能方面入手,却没写两 ...
- 为什么要用visibility:hidden;代替display:none;?
为什么要用用visibility:hidden;代替display:none;?因为后者更加消耗浏览器: css绘制画面有两种形式:repaint 和reflow,当我们更改css属相如backgro ...
- 关于隐藏元素高度的问题 css visibility:hidden 与 display:none的区别
其实这是一个老问题了,s visibility:hidden 与 display:none 共同点就是都会似的元素不可见.但是 visibility:hidden 的DOM元素是占用空间的,会挤占其他 ...
- visibility:hidden和display:none的区别
大家知道,如果想让某一段代码在前台不显示,最简单的方法是用css的display:none即可,这样下边的内容就自动上移或右侧的左移来填补这个空隙. 但特殊情况下我们只需要隐藏这个元素,但它的位置不能 ...
- visibility: hidden 和 display: none的区别
相同点: 两者都可以将dom元素隐藏 不同点: 1.display: none 隐藏之后不占用文档流,而visibility: hidden却会占用文档流,如果要在隐藏元素的同时获取其尺寸信息,那就可 ...
- css 中visibility:hidden和display:none有什么区别呢
<div style="width:100px;height:100px;background:red;visibility:hidden"></div>/ ...
- 分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景
总结: 结构: display:none: 会让元素完全从渲染树中消失,渲染的时候不占据任何空间, 不能点击, visibility: hidden:不会让元素从渲染树消失,渲染元素继续占据空间,只是 ...
- visibility: hidden和 display: none的区别
visibility: hidden----将元素隐藏,但是在网页中该占的位置还是占着. display: none----将元素的显示设为无,即在网页中不占任何的位置.
- display:none和visibility:hidden两者的区别
display与元素的隐藏 如果给一个元素设置了display: none,那么该元素以及它的所有后代元素都会隐藏,它是前端开发人员使用频率最高的一种隐藏方式.隐藏后的元素无法点击,无法使用屏幕阅读器 ...
随机推荐
- kail linux arp欺骗
首先连接wifi,进入内网 1,查看内网的存活主机 命令 fping -asg 192.168.1.0/24 (视不同环境而定,假设这里的路由器地址为 192.168.1.1) 也可利用其他 ...
- scu 4439 Vertex Cover
题意: 给出n个点,m条边,将若干个点染色,使得每个边至少有一点染色,问至少染多少个点. 思路: 如果是二分图,那就是最小点覆盖,但是这是一般图. 一般图的最小覆盖是npc问题,但是这题有一个条件比较 ...
- 【函数封装】javascript判断是否是微信浏览器
//判断是否是微信浏览器的函数 function isWeiXin(){ //window.navigator.userAgent属性包含了浏览器类型.版本.操作系统类型.浏览器引擎类型等信息,这个属 ...
- 【封装函数】当前元素距离html文档顶部距离
function getPositionTop(node) { var top = node.offsetTop; var parent = node.offsetParent; while(pare ...
- python递归的例子
例子1:递归实现嵌套列表求和 #encoding=utf-8 a=[[1,2,3], [4,5,6], [7,8,9]]def listsum(L): result=0 for i i ...
- JS中的函数节流throttle详解和优化
JS中的函数节流throttle详解和优化在前端开发中,有时会为页面绑定resize事件,或者为一个页面元素绑定拖拽事件(mousemove),这种事件有一个特点,在一个正常的操作中,有可能在一个短的 ...
- 区块链区块的生成和链接,比特币btc的产生,UTXO的生成和消耗,比特币系统
区块链区块的生成和链接,比特币btc的产生,UTXO的生成和消耗,比特币系统 区块链区块的生成和链接,比特币btc的产生,UTXO的生成和消耗,比特币系统
- sqlyog连接Linux上的mysql报错误号码2013,错误号码1130的解决办法
sqlyog连接Linux上的mysql报错误号码2013,错误号码1130的解决办法 1.报错误号码2013,可能是端口号不是默认的3306,需要改成对应的,检查命令是: [root@host et ...
- 给本体ONT技术社区的第一封公开信-涉及到不少区块链技术知识
给本体ONT技术社区的第一封公开信-涉及到不少区块链技术知识 共识是区块链的核心机制,在一系列的区块链的发展历史当中,PoW/PoS/BFT等系列的共识算法都在各自的应用场景发挥了不同作用.在本体的第 ...
- echo 命令详解
echo命令用于在shell中打印shell变量的值,或者直接输出指定的字符串. 选项 -e:激活转义字符. 使用-e选项时,若字符串中出现以下字符,则特别加以处理,而不会将它当成一般文字输出: \a ...