Home > Article > Web Front-end > [HTML/CSS]The difference between display:none and visibility:hidden_html/css_WEB-ITnose
[HTML/CSS]The difference between display:none and visibility:hidden_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:49:511440browse
Write it in front
A friend in the group asked such a question, the display:none tag affects the layout. This leads to the problem of this article. In my impression, the block element with display:none does not occupy a position.
An example
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title></head><body> <div style="width:100%;height:200px;border:1px solid red;">第一个层</div> <div style="width:100%;height:200px;border:1px solid black;">第二个层</div></body></html>
Browse results
Set the style visibility:hidden for the first layer
<div style="width: 100%; height: 200px; border: 1px solid red; visibility: hidden;">第一个层</div> <div style="width:100%;height:200px;border:1px solid black;">第二个层</div>
Browse the results
Then set the display:none style for the first layer
Pass From the above comparison, you will also find that display:none can hide the block element and not occupy the position. Although visibility: hidden makes the block element hidden, it still occupies the position.
Summary
1. display:none: The element is hidden and does not occupy position.
2. visibility:hidden: The element is hidden and takes up position.