display:none和visibility:hidden两者的区别

      一般在面试中问display:none和visibility:hidden两者区别，面试者都能回答出：两者都是隐藏元素，前者不会占据空间，后者隐藏了依然占据空间。记录这篇博客，想能够更深入或者更全面比较两者区别。

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

两者区别：

  1. visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别
  2. visibility: hidden不会影响计数器的计数，如图所示，visibility: hidden虽然让一个元素不见了，但是其计数器仍在运行。这和display: none完全不一样
  3. visibility用来设置元素的可见状态。
  4. display:none是会有回流，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”。
  5. visibility: hidden; 不会有回流，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5   <meta charset="UTF-8">
 6   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8   <title>display:none和visibility:hidden两者的区别</title>
 9 </head>
10 
11 <body>
12    <div>
13     <strong>给元素设置visibility:hidden样式</strong>
14      <ol>
15       <li>元素1</li>
16        <li style="visibility:hidden;">元素2</li>
17        <li>元素3</li>
18        <li>元素4</li>
19     </ol>
20   </div> 
21   <div>
22     <strong>给元素设置display:none样式</strong>
23     <ol>
24         <li>元素1</li>
25         <li style="display:none;">元素2</li>
26         <li>元素3</li>
27         <li>元素4</li>
28     </ol>
29   </div>
30 
31   <strong>给元素设置visibility:hidden继承属性样式</strong>
32   <div style="visibility:hidden">
33     <ol>
34         <li>元素1</li>
35         <li style="visibility:visible;">元素2</li>
36         <li>元素3</li>
37         <li>元素4</li>
38      </ol>
39   </div>
40 </body>
41 
42 </html>

语法：

visibility : inherit | visible | collapse | hidden

参数可参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/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　将对象作为表格行组显示

 运用总结：

  1. 若用JQeury中的Show()来显示元素，则只对display:none有效，对于用visibility:hidden方式隐藏的元素是无效的
  2. display:none和visibility:hidden都是隐藏元素而不是删除元素。

 

posted @ 2020-09-28 07:47  TerryMin  阅读(3479)  评论(0)  编辑  收藏  举报