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元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置仍然存在,也即是说它仍具有高度、宽度等属性值。
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元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置仍然存在,也即是说它仍具有高度、宽度等属性值。