溫馨提示×

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

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

css中display屬性的用法示例

發(fā)布時(shí)間：2022-03-02 11:49:16 來源：億速云 閱讀：200 作者：小新 欄目：web開發(fā)

小編給大家分享一下css中display屬性的用法示例，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

    css定位屬性Positioning

    display:none

    不再頁面渲染元素

    <!DOCTYPEhtml>

    <html>

    <head>

    <metacharset="UTF-8">

    <metaname="viewport"content="width=device-width,initial-scale=1.0">

    <metahttp-equiv="X-UA-Compatible"content="ie=edge">

    <title>css-test</title>

    <style>

    .content{

    display:none;

    }

    </style>

    </head>

    <body>

    <p>這一段落不會(huì)被顯示出來</p>

    <p>這個(gè)段落會(huì)被顯示出來</p>

    <p>當(dāng)一個(gè)元素中的display屬性是none時(shí)，瀏覽器不會(huì)渲染這個(gè)元素里的任何內(nèi)容，不會(huì)占據(jù)瀏覽器窗口空間，但它存在與文檔流當(dāng)中。</p>

    </body>

    </html>

    display:block

    塊級(jí)元素

    <!DOCTYPEhtml>

    <html>

    <head>

    <metacharset="UTF-8">

    <metaname="viewport"content="width=device-width,initial-scale=1.0">

    <metahttp-equiv="X-UA-Compatible"content="ie=edge">

    <title>css-test</title>

    <style>

    </style>

    </head>

    <body>

    <p>p元素默認(rèn)是block塊級(jí)元素</p>

    <div>div默認(rèn)也是block塊級(jí)元素</var></div>

    <p>塊級(jí)元素的特點(diǎn)：元素的內(nèi)容會(huì)充滿整行</p>

    </body>

    </html>

    display:inline

    行內(nèi)元素

    <!DOCTYPEhtml>

    <html>

    <head>

    <metacharset="UTF-8">

    <metaname="viewport"content="width=device-width,initial-scale=1.0">

    <metahttp-equiv="X-UA-Compatible"content="ie=edge">

    <title>css-test</title>

    <style>

    .content{

    display:inline

    }

    </style>

    </head>

    <body>

    <div>display屬性為inline的元素被稱為內(nèi)連元素。</var></div>

    <div>相鄰元素也是inline屬性時(shí)，如果內(nèi)容不夠撐開整行。相鄰元素的內(nèi)容會(huì)顯示在它傍邊，當(dāng)窗口整行不夠顯示時(shí)，內(nèi)容會(huì)換行顯示。</div>

    </body>

    </html>

    display:inline-block

    行內(nèi)塊級(jí)元素

    <!DOCTYPEhtml>

    <html>

    <head>

    <metacharset="UTF-8">

    <metaname="viewport"content="width=device-width,initial-scale=1.0">

    <metahttp-equiv="X-UA-Compatible"content="ie=edge">

    <title>css-test</title>

    <style>

    .content{

    display:inline-block

    }

    </style>

    </head>

    <body>

    <div>display屬性為inline-block的元素被稱為行內(nèi)塊級(jí)元素。</var></div>

    <div>行內(nèi)塊級(jí)元素的特性是獨(dú)占一行，內(nèi)容不會(huì)撐開整行</div>

    </body>

    </html>

    display:list-item

    列表屬性

    <!DOCTYPEhtml>

    <html>

    <head>

    <metacharset="UTF-8">

    <metaname="viewport"content="width=device-width,initial-scale=1.0">

    <metahttp-equiv="X-UA-Compatible"content="ie=edge">

    <title>css-test</title>

    <style>

    .content{

    display:list-item

    }

    </style>

    </head>

    <body>

    <div>display屬性為list-item時(shí)元素會(huì)作為列表顯示</var></div>

    <div>下班要買菜</div>

    <div>回家要做飯</div>

    </body>

    </html>

    display:inherit

    繼承父級(jí)元素的屬性

    <!DOCTYPEhtml>

    <html>

    <head>

    <metacharset="UTF-8">

    <metaname="viewport"content="width=device-width,initial-scale=1.0">

    <metahttp-equiv="X-UA-Compatible"content="ie=edge">

    <title>css-test</title>

    <style>

    .content{

    display:inherit

    }

    </style>

    </head>

    <body>

    <div>

    <span>正常的span元素效果，內(nèi)容不會(huì)撐開整行</span>

    <span>繼承父級(jí)屬性的效果，父級(jí)的display屬性值是block繼承后內(nèi)容撐開整行</span>

    </div>

    </body>

    </html>


css中display屬性的用法示例css中display屬性的用法示例


看完了這篇文章，相信你對(duì)“css中display屬性的用法示例”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問一下細(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
助
手