溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

css中display:hidden和display:none有哪些區(qū)別

發(fā)布時(shí)間：2020-11-19 13:49:15 來(lái)源：億速云 閱讀：1553 作者：小新 欄目：web開發(fā)

小編給大家分享一下css中display:hidden和display:none有哪些區(qū)別，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

css中display:hidden和display:none的區(qū)別是：display:none表示不存在且不加載，即不為被隱藏的對(duì)象保留其物理空間；display:hidden表示隱藏但在瀏覽時(shí)保留位置，及對(duì)象在網(wǎng)頁(yè)上不可見。

區(qū)別分析：

display:none視為不存在且不加載，即不為被隱藏的對(duì)象保留其物理空間，該對(duì)象在頁(yè)面上徹底消失。

visibility:hidden隱藏，但在瀏覽時(shí)保留位置，即使對(duì)象在網(wǎng)頁(yè)上不可見，但該對(duì)象在網(wǎng)頁(yè)上所占的空間沒(méi)有改變。

使用 display:none屬性后，HTML元素（對(duì)象）的寬度、高度等各種屬性值都將“丟失”；而使用visibility:hidden屬性后，HTML元素（對(duì)象）僅僅是在視覺上看不見（完全透明），而它所占據(jù)的空間位置仍然存在。也即是說(shuō)它仍具有高度、寬度等屬性值。

舉例：

<!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有哪些區(qū)別

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

css中display:hidden和display:none有哪些區(qū)別

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

css中display:hidden和display:none有哪些區(qū)別

以上是css中display:hidden和display:none有哪些區(qū)別的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手