首頁 > web前端 > css教學 > css中display:hidden和display:none有什麼差別

css中display:hidden和display:none有什麼差別

王林
發布: 2020-11-30 17:15:00
原創
10434 人瀏覽過

css中display:hidden和display:none的區別是:1、【display:none】表示不存在且不加載,不為被隱藏的物件保留其物理空間;2、【display:hidden 】是隱藏但在瀏覽時保留位置,及物件在網頁上不可見。

css中display:hidden和display:none有什麼差別

區別分析:

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

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

(學習影片分享:css影片教學

使用display:none屬性後,HTML元素(物件)的寬度、高度等各種屬性值都會「遺失」;而使用visibility:hidden屬性後,HTML元素(物件)只是視覺上看不見(完全透明),而它所佔據的空間位置仍然存在。也即是說它仍具有高度、寬度等屬性值。

範例:

<!DOCTYPE html>
<html>
<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>
登入後複製

效果:

css中display:hidden和display:none有什麼差別

#在表格第二行的tr 加上style="display:none "後:

css中display:hidden和display:none有什麼差別

在表格第二行的tr 加上style="visibility:hidden"後:

css中display:hidden和display:none有什麼差別

相關推薦:CSS教學

#

以上是css中display:hidden和display:none有什麼差別的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
css
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板