Better than yesterday-前端【display:none與visibility:hidden;】

時間 2020-05-31

標籤 better 前端 display visibility hidden 欄目 CSS 简体版

原文原文鏈接

display:none;與visibility:hidden;

相同點：
二者都能實現元素的隱藏css

區別：
display:none;元素並不會佔據任何物理空間，可是visibility:hidden只是看不到，可是物理上仍是存在的【也就是說若是使用display:none;本來該元素佔用的空間會在頁面佈局上消失】html

實例：佈局

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>display:none與vivibility:hidden實踐</title>
    </head>
    <style type="text/css">
            div
            {
                width:200px;
                height: 100px;
                border: 2px solid black;
            }
            .first
            {
                display: none;
            }
            .hidden
            {
                visibility: hidden;
            }
    </style>
    <body>
        <div class="first">
            第一個div設置display:none
        </div>
        <div>
            第二個div
        </div>
        <div class="hidden">
            第三個div設置visibility:hidden
        </div>
        <div>
            第四個div
        </div>
    </body>
</html>