首頁 > 文章 > web前端 > css中關於display:none與visible:hidden的具體差異詳解

css中關於display:none與visible:hidden的具體差異詳解

黄舟原創: 2017-07-24 10:36:332213瀏覽

display:none視為不存在且不加載，即，不為被隱藏的物件保留其物理空間，即該物件在頁面上徹底消失。

visibility:hidden隱藏，但在瀏覽時保留位置，即，使物件在網頁上不可見，但該物件在網頁上所佔的空間並沒有改變。

使用display:none屬性後，HTML元素（物件）的寬度、高度等各種屬性值都會「遺失」;

而使用visibility:hidden屬性後，HTML元素（物件）只是在視覺上看不見（完全透明），而它所佔據的空間位置仍然存在。也即是說它仍具有高度、寬度等屬性值。

程式碼示範：

表格初始狀態：

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title></title></head><body>
    <table id="table1" style="border: 2px dashed red;background-color: #e2e2e2;padding: 5px">
        <tr>
            <td>A1            </td>
            <td>A2            </td>
        </tr>
        <tr>
            <td>B1            </td>
            <td>B2            </td>
        </tr>
    </table></body></html>

效果如下：

##在表格第二行的tr 加上 style="max-width:90%"後：

#在表格第二行的tr 加上 style="max-width:90%"後：

display:none和visible:hidden都能把網頁上某個元素藏起來，但兩者有差別:

display:none ---不為被隱藏的物件保留其物理空間，也就是該物件在頁面上完全消失，通俗來說就是看不見也摸不到。

visible:hidden--- 讓物件在網頁上不可見，但該物件在網頁上所佔的空間沒有改變，通俗來說就是看不見但摸得到。

範例：

<html>
<head>
<title>display:none和visible:hidden的区别</title>
</head>
<body >
<span style="display:none; background-color:Blue">隐藏区域</span><span style=" background-color:Green">显示区域</span><br />
<span style="visibility:hidden; background-color:Blue">隐藏区域</span><span style="background-color:Green">显示区域</span>
</body>
</html>

以上是css中關於display:none與visible:hidden的具體差異詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：css3+html5如何實現分步驟註冊登入表單的範例下一篇：css3+html5如何實現分步驟註冊登入表單的範例

看更多