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.
<!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.
1. display:none: The element is hidden and does not occupy position.
2. visibility:hidden: The element is hidden and takes up position.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
