visibility和display的区别（关于HTML的style.display和style.visibility的区别）

本文目录

• 关于HTML的style.display和style.visibility的区别
• CSS中visibility和display的区别
• JAVASCRIPT style 中visibility和display之间的区别
• div的display和visible的区别
• 关于CSS属性中visibility隐藏和display消失的区别简析
• visibility: hidden和display: none 有什么不同

关于HTML的style.display和style.visibility的区别

很显然，visibility字面意思就是可视性，要么就是可视visible，要么就是隐藏hidden；而display当然也可以影藏none，也可显示，但是，显示不一定只是指看不看的见，而是以一种什么样的形式显示在浏览器当中，block显示为块级元素，inline显示为行内元素，inline-table以表格形式显示等等。手打，自己的理解，求采纳！

CSS中visibility和display的区别

CSS中的visibility和display两个属性很容易被混淆，因为它们看起来是做同样的事情，但实际上，这两个属性是完全不同的。visibility属性用来设置一个给定的元素是否显示（visibility=“visible|hidden“），但是，虽然一个元素的visibility被设置为hidden，但是该元素仍然会占据设计的位置：《scriptlanguage=“JavaScript“》functiontoggleVisibility(me){if(me.style.visibility==“hidden“){me.style.visibility=“visible“;}else{me.style.visibility=“hidden“;}}《/script》《divonclick=“toggleVisibility(this)“style=“position:relative“》Thisexampledisplaystextthattogglesbetweenavisibilityof’visible’and’hidden’.Notethebehaviorofthenextline.《/div》《div》Thissecondlineshouldn’tmove,sincevisibilityretainsitspositionintheflow《/div》《scriptlanguage=“JavaScript“》functiontoggleVisibility(me){if(me.style.visibility==“hidden“){me.style.visibility=“visible“;}else{me.style.visibility=“hidden“;}}《/script》《divonclick=“toggleVisibility(this)“style=“position:relative“》Thisexampledisplaystextthattogglesbetweenavisibilityof’visible’and’hidden’.Notethebehaviorofthenextline.《/div》《div》Thissecondlineshouldn’tmove,sincevisibilityretainsitspositionintheflow《/div》注意如果display属性没有被明确设置，将默认被设置为该类元素的常用值。明显地，两个属性中display属性更有用，多数情况下在隐藏文字的时候要将相关的元素做相应的调节（例如树结构）。

JAVASCRIPT style 中visibility和display之间的区别

visibility属性：

确定元素显示还是隐藏；visibility=“visible|hidden“，visible显示，hidden隐藏。

当visibility被设置为“hidden“的时候，元素虽然被隐藏了，但它仍然占据它原来所在的位置。

display属性:

就有一点不同了。visibility属性是隐藏元素但保持元素的浮动位置，而display实际上是设置元素的浮动特征。

block:当display被设置为block(块)时，容器中所有的元素将会被当作一个单独的块，就像《DIV》元素一样，它会在那个点被放入到页面中。(实际上你可以设置《span》的display:block，使其可以像《DIV》一样工作。

inline:将display设置为inline，将使其行为和元素inline一样---即使它是普通的块元素如《DIV》，它也将会被组合成像《span》那样的输出流。

none:最后是display被设置：none,这时元素实际上就从页面中被移走，它下面所在的元素就会被自动跟上填充。

div的display和visible的区别

visibility属性用来确定元素是显示还是隐藏的，当visibility被设置为“hidden“的时候，元素虽然被隐藏了，但它仍然占据它原来所在的位置。visibility属性是隐藏元素但保持元素的浮动位置，而display实际上是设置元素的浮动特征。当display被设置为block(块)时，容器中所有的元素将会被当作一个单独的块，就像《div》元素一样，它会在那个点被放入到页面中。(实际上你可以设置《span》的display:block，使其可以像《div》一样工作。将display设置为inline，将使其行为和元素inline一样---即使它是普通的块元素如《div》，它也将会被组合成像《span》那样的输出流。最后是display被设置：none,这时元素实际上就从页面中被移走，它下面所在的元素就会被自动跟上填充。

关于CSS属性中visibility隐藏和display消失的区别简析

了解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，但是该元素仍然会占据设计的位置： 复制代码代码如下:《script language=“JavaScript“》 function toggleVisibility(me)...{ if (me.style.visibility==“hidden“)...{ me.style.visibility=“visible“; } else ...{ me.style.visibility=“hidden“; } } 《/script》 《div onclick=“toggleVisibility(this)“ style=“position:relative“》 This example displays text that toggles between a visibility of ’visible’ and ’hidden’. Note the behavior of the next line.《/div》《div》This second line shouldn’t move, since visibility retains its position in the flow《/div》 复制代码代码如下:《script language=“JavaScript“》 function toggleVisibility(me){ if (me.style.visibility==“hidden“){ me.style.visibility=“visible“; } else{ me.style.visibility=“hidden“; } } 《/script》 《div onclick=“toggleVisibility(this)“ style=“position:relative“》 This example displays text that toggles between a visibility of ’visible’ and ’hidden’. Note the behavior of the next line.《/div》《div》This second line shouldn’t move, since visibility retains its position in the flow《/div》 注意如果display属性没有被明确设置，将默认被设置为该类元素的常用值。明显地，两个属性中display属性更有用，多数情况下在隐藏文字的时候要将相关的元素做相应的调节（例如树结构）。 注意当一个元素被隐藏时，不能接受任何事件，因此上例中当《div》被隐藏后，不能再接受鼠标点击事件，所以再点击该控件位置不能再次显示控件。Display属性的作用则有所不同，visibility隐藏元素，但是却为该元素预留位置，而display实际是设置该元素的属性。例如任何display设置为block的元素都被视为一个单独的块儿，这时的《SPAN》会象《DIV》一样工作，而当display属性设置为inline时该元素将变成一个单列的元素，这时的《DIV》也会象《SPAN》一样工作。最后，如果一个元素的display属性被设置为none，那么这个元素实际上将彻底从输出流中去除，并且其后的所有元素将提到前面对的位置。 复制代码代码如下:《script language=“JavaScript“》 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’.“); } } } 《/script》 《div》Click on the 《span id=“blueText“ onclick=“toggleDisplay(this)“ style=“color:blue;position:relative;cursor:hand;“》blue text《/span》 to see how it affects the flow.《/div》

visibility: hidden和display: none 有什么不同

visibility: hidden和display: none 在作用、对HTML元素的影响、定义上有所不同:

1、作用不同

visibility: hidden----将元素隐藏，但是在网页中该占的位置还是占着。

display: none----将元素的显示设为无，即在网页中不占任何的位置。

2、使用后HTML元素有所不同

visibility:hidden，使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。

display:none，使用该属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”。

3、定义不同

visibility 属性指定一个元素是否是可见的。

display这个属性用于定义建立布局时元素生成的显示框类型。

参考资料:百度百科 display

百度百科 visibility