溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

css如何使用display顯示隱藏元素

發(fā)布時間:2021-04-29 09:45:36 來源:億速云 閱讀:499 作者:小新 欄目:web開發(fā)

這篇文章給大家分享的是有關css如何使用display顯示隱藏元素的內容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。

css的全稱是什么

css的全稱是Cascading Style Sheets(層疊樣式表),它是一種用來表現HTML或XML等文件樣式的計算機語言。CSS不僅可以靜態(tài)地修飾網頁,還可以配合各種腳本語言動態(tài)地對網頁各元素進行格式化。

css使用display顯示隱藏元素的方法:1、給元素設置“display:none;”樣式即可隱藏元素;2、給元素設置“display:block;”樣式即可將隱藏的元素顯示出來。

本教程操作環(huán)境:windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

css display屬性

display 屬性規(guī)定元素應該生成的框的類型。設置:

  • display: none; 隱藏對象

  • display: block;除了轉換為塊級元素之外,還有顯示元素的意思

說明:

使用display: none;可以不占據空間的,把元素隱藏起來,所以動態(tài)改變此屬性時會引起重排(改變頁面布局),可以理解成在頁面中把該元素刪除掉一樣;不會被子孫繼承,但是其子孫是不會顯示的,畢竟都一起被隱藏了。

示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>元素隱藏--display:none</title>
        <style>
            .display{
                display:none;
            }
        </style>
    </head>
    <body>
        <div>正常顯示元素</div>
        <div class="display">隱藏元素</div>
        <div>正常顯示元素</div>

    </body>
</html>

效果圖:

css如何使用display顯示隱藏元素

感謝各位的閱讀!關于“css如何使用display顯示隱藏元素”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,讓大家可以學到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!

向AI問一下細節(jié)

免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI