display:none与visibility:hidden的区别

Posted 2020-09-19 willie-Wang

visibility(透明度):隐藏对应的元素单不挤占该元素元来的空间。

display(展示):隐藏对应的元素并且挤占该元素元来的空间。

---

通俗点来说

---

 

display:none的话会让某一段代码不在前台显示，但是下边的弄容就自动上移或者右移来填补这个空隙，对象不占任何空间。

visibility:hidden只是让元素透明度调低被覆盖了而已，所以我们看不到，就被隐藏了起来。但是元素本身是存在的所以会占据元来空间。感觉这个和index属性有点像。

 

---

 

以下内容  写于2017年5月23日   来源于CSS教程  引用过来的，主要用于以后自己忘记的时候方便查看，而不是到处乱找。

display:none;与visibility:hidden;的区别
如果想让某一段代码在前台不显示，最简单的方法是用CSS的display:none即可，这样下边的内容就自动上移或右侧的左移来填补这个空隙。但特殊情况下我们只需要隐藏这个元素，

但它的位置不能被占了，那该怎么实现呢？接下来我们来看css的另外一个属性Visibility属性。

visibility:隐藏对应的元素但不挤占该元素原来的空间。display:隐藏对应的元素并且挤占该元素原来的空间。

来看看下面的这个例子：

xml/html代码<divstyle="width:100px;height:100px;background:red;visibility:hidden"></div><!--对象隐藏后，还有占有相应的空间大小--><divstyle="width:100px;height:100px;background:red;display:none"></div><!--对象隐藏后，对象不占任何空间，对比一下就知道了-->
下面来看visibility和dispaly的一些参数

visibility用来设置元素的可见状态。

语法：

visibility : inherit | visible | collapse | hidden

参数：

inherit : 　继承上一个父对象的可见性

visible : 　对象可视

hidden : 　对象隐藏

collapse : 　主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象，其作用等同于hidden。IE5.5尚不支持此属性。

说明：

设置或检索是否显示对象。与display属性不同，此属性为隐藏的对象保留其占据的物理空间。

如果希望对象为可视，其父对象也必须是可视的。

对应的脚本特性为visibility。请参阅我编写的其他书目。

display用来设定元素的显示状态。

语法：

display : block | none | inline | compact | marker | inline-table | list-item | run-in | table |table-caption | table-cell | table-column | table-column-group | table-footer-

group | table-header-group | table-row | table-row-group

参数：

block : 　CSS1　块对象的默认值。用该值为对象之后添加新行

none : 　CSS1　隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间

inline : 　CSS1　内联对象的默认值。用该值将从对象中删除行

compact : 　CSS2　分配对象为块对象或基于内容之上的内联对象

marker : 　CSS2　指定内容在容器对象之前或之后。要使用此参数，对象必须和:after及:before 伪元素一起使用

inline-table : 　CSS2　将表格显示为无前后换行的内联对象或内联容器

list-item : 　CSS1　将块对象指定为列表项目。并可以添加可选项目标志

run-in : 　CSS2　分配对象为块对象或基于内容之上的内联对象

table : 　CSS2　将对象作为块元素级的表格显示

table-caption : 　CSS2　将对象作为表格标题显示

table-cell : 　CSS2　将对象作为表格单元格显示

table-column : 　CSS2　将对象作为表格列显示

table-column-group : 　CSS2　将对象作为表格列组显示

table-header-group : 　CSS2　将对象作为表格标题组显示

table-footer-group : 　CSS2　将对象作为表格脚注组显示

table-row : 　CSS2　将对象作为表格行显示

table-row-group : 　CSS2　将对象作为表格行组显示

说明：

设置或检索对象是否及如何显示。

目前 IE5.5仅支持以上CSS1的参数。

　　以上是CSS官方给出的解释。对于这两个css属性来说，很多人都分不清楚这两个属性，尤其是其在功能上有部分重叠的地方，并且从定义中来看，元素的显示状态和元素的可见状态概念上的区别很不明显。

　　visibility和display两个属性都有隐藏元素的功能。

　　但使用visibility属性并不能减少浏览器打开网页的速度，就是说visibility属性所控制的元素虽然不在浏览器里面显示出来，但他在浏览区里是存在的，浏览器打开网页的时候已经下载了这个元素，只是不显示而已。

　 并且这个元素在浏览器显示的页面中也要占他本身大小的位置，而这个位置显示的是空白而已。

　　而display属性设置为none，这个元素就变成了一个不显示的元素，浏览器在载入网页的时候会忽略这个元素，不会下载其内容，浏览器打开速度会比没有设置display属性前要快。

总结

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

而使用visibility:hidden属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。

CSS display:none和visibility:hidden的区别

visibility:hidden隐藏，但在浏览时保留位置；CSS display:none视为不存在，且不加载！

Overflow属性值{visible|hidden|scroll|auto}前提是先要限制DIV的宽度（width）和高度（height）。二者都是隐藏HTML元素，在视觉效果上没有区别，但在一些DOM操作中二者还是有所不同的。

CSS display:none;

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

visibility:hidden;

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

---