Heim >Web-Frontend >HTML-Tutorial >两种隐藏元素方式【display: none】和【visibility: hidden】的区别_html/css_WEB-ITnose
两种隐藏元素方式【display: none】和【visibility: hidden】的区别_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:38:011686Durchsuche
此随笔的灵感来源于上周的一个面试，在谈到隐藏元素的时候，面试官突然问我【display: none】和【visibility: hidden】的区别，我当时一愣，这俩有区别吗，好像有，但是忘记了啊，因为平常基本都是用【display: none】，几乎没用过【visibility: hidden】，我只好如实回答。面试结束后回到家的第一件事就是敲代码测试，下面就是测试过程及结果：
一、首先在页面中放2个div，并用不同的背景色区分他们：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>两种隐藏元素方式的区别</title> 6 <style type="text/css"> 7 div{ width: 100px; height: 100px; color: white; text-align: center; line-height: 100px; font-size: 40px;} 8 </style> 9 </head>10 <body>11 <div style="background: blue;>div1</div>12 <div style="background: red;">div2</div>13 </body>14 </html> 二、给div1设置【display: none】：
<div style="background: blue; display: none">div1</div>
三、给div1的【display: none】换成【visibility: hidden】：
<div style="background: blue; visibility: hidden">div1</div>
四、总结：
【display: none】：隐藏元素及元素内的所有内容，并且该元素的位置、宽高等其他属性值一并“消失”；
【visibility: hidden】：隐藏元素及元素内的所有内容，但是该元素的位置、宽高等属性值仍然还在。
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：css 里的行高_html/css_WEB-ITnoseNächster Artikel：CSS相对定位、绝对定位_html/css_WEB-ITnose