本文详细分析了CSS中visibility:hidden和display:none的区别。visibility:hidden元素在页面上视觉上消失，但保留其占据的空间，而display:none则使元素完全从布局中移除，不占用空间。此外，display:none会影响元素的文档流，而visibility:hidden不会。同时，display:none在切换时可能引起重绘，性能稍逊于visibility:hidden。文章还提到了这两个属性在交互和SEO方面的影响，以及如何利用CSS实现元素的隐藏与显示。
关于CSS属性中visibility隐藏和display消失的区别简析
发布时间：2012-12-07 14:56:22 作者：佚名 
我要评论
当html元素被设置为display:none;后，浏览器不会解析该元素，“none”就是没有，消失了，所以他不会再文档流中占位。而visibility:hidden;仅仅是视觉上消失了，“hidden”也就是隐藏了，但是它所在的位置仍然还在，就像你把你个文件给隐藏了，但是这个文件在你的硬盘中
了解Css的人应该都知道display:none;和visibility:hidden;之间的一些区别，当html元素被设置为display:none;后，浏览器不会解析该元素，“none”就是没有，消失了，所以他不会再文档流中占位。而visibility:hidden;仅仅是视觉上消失了，“hidden”也就是隐藏了，但是它所在的位置仍然还在，就像你把你个文件给隐藏了，但是这个文件在你的硬盘中仍然是占据一定空间的，只是你看不见而已。
对使用display:none;的元素，浏览器不会去解析，搜索引擎可能会认为被隐藏的文字属于垃圾信息而被忽略，而且屏幕阅读器(是为视觉上有障碍的人设计的读取屏幕内容的程序)会忽略被隐藏的文字。
而对使用visibility:hidden;的元素，虽然隐藏了，但位置仍在，给人的感觉是“占着茅坑布拉斯”，要配合position:relative和position:absolute一起来用，没有display:none;那么简单、灵活。就另外一点，visibility:hidden;转换为visibility:visible跟display:none;转换为display:block;性能要好，因为display在切换可见性时会产生reflow，它要重新构建frame，当然要比visibility:visible慢。
如果你以上两种方法都不想要的话，可以写一个类：
复制代码代码如下:
.hidden{
overflow: hidden;
width: 0;
height: 0;
border:none;
}
就是采用overflow隐藏，然后把元素的基本属性值设置为最小或无，当然，如果你要显示的话，还得写另一个相应的类。
CSS中的visibility和display两个属性很容易被混淆，因为它们看起来是做同样的事情，但实际上，这两个属性是完全不同的。 visibility属性用来设置一个给定的元素是否显示(visibility="visible|hidden")，但是，虽然一个元素的visibility被设置为hidden，但是该元素仍然会占据设计的位置：
复制代码代码如下:
function toggleVisibility(me)...{
if (me.style.visibility=="hidden")...{
me.style.visibility="visible";
}
else ...{
me.style.visibility="hidden";
}
}
This example displays text that toggles between a visibility of 'visible' and 'hidden'.
Note the behavior of the next line.
move, since visibility retains its position in the flow
复制代码代码如下:
function toggleVisibility(me){
if (me.style.visibility=="hidden"){
me.style.visibility="visible";
}
else{
me.style.visibility="hidden";
}
}
This example displays text that toggles between a visibility of 'visible' and 'hidden'.
Note the behavior of the next line.
move, since visibility retains its position in the flow
注意如果display属性没有被明确设置，将默认被设置为该类元素的常用值。明显地，两个属性中display属性更有用，多数情况下在隐藏文字的时候要将相关的元素做相应的调节(例如树结构)。
注意当一个元素被隐藏时，不能接受任何事件，因此上例中当
复制代码代码如下:
function toggleDisplay(me)...{
if (me.style.display=="block")...{
me.style.display="inline";
alert("Text is now 'inline'.");
}
else ...{
if (me.style.display=="inline")...{
me.style.display="none";
alert("Text is now 'none'. It will reappear in three seconds.");
window.setTimeout("blueText.style.display='block';",3000,"JavaScript");
}
else ...{
me.style.display="block";
alert("Text is now 'block'.");
}
}
}
style="color:blue;position:relative;cursor:hand;">blue text
tosee how it affects the flow.
相关文章
这篇文章主要介绍了纯 CSS 实现【点击展开阅读全文】功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-10-13
这篇文章主要介绍了CSS实现两个元素相融效果(粘滞效果),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学2020-10-12
这篇文章主要介绍了css为什么要放在head标签中,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-10-12
这篇文章主要介绍了CSS两种常用的封装示例，帮助大家更好的利用CSS制作网页，感兴趣的朋友可以了解下2020-10-12
这篇文章主要介绍了CSS标签模式display属性,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-10-12
这篇文章主要介绍了css 收货地址平行四边形的线条样式示例代码,代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-10-09
这篇文章主要介绍了css实现鼠标放上去时图片过渡转换动画,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-10-09
这篇文章给大家介绍了CSS中width和height的默认值auto与%案例，本文通过实例案例给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2020-09-30
这篇文章主要介绍了css一些不常见但很有用的属性操作大全,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-09-28
这篇文章主要介绍了解决搜索框和搜索按钮button边框不能重合的问题,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-09-28
最新评论
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
