Home > Article > Web Front-end > 两种隐藏元素方式【display: none】和【visibility: hidden】的区别_html/css_WEB-ITnose
两种隐藏元素方式【display: none】和【visibility: hidden】的区别_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:38:011642browse
此随笔的灵感来源于上周的一个面试，在谈到隐藏元素的时候，面试官突然问我【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】：隐藏元素及元素内的所有内容，但是该元素的位置、宽高等属性值仍然还在。
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：css 里的行高_html/css_WEB-ITnoseNext article：CSS相对定位、绝对定位_html/css_WEB-ITnose