欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

css中display屬性的用法示例

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

創(chuàng)新互聯(lián)企業(yè)建站,十年網(wǎng)站建設(shè)經(jīng)驗(yàn)，專注于網(wǎng)站建設(shè)技術(shù)，精于網(wǎng)頁設(shè)計(jì)，有多年建站和網(wǎng)站代運(yùn)營經(jīng)驗(yàn)，設(shè)計(jì)師為客戶打造網(wǎng)絡(luò)企業(yè)風(fēng)格，提供周到的建站售前咨詢和貼心的售后服務(wù)。對于成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站中不同領(lǐng)域進(jìn)行深入了解和探索，創(chuàng)新互聯(lián)在網(wǎng)站建設(shè)中充分了解客戶行業(yè)的需求，以靈動的思維在網(wǎng)頁中充分展現(xiàn)，通過對客戶行業(yè)精準(zhǔn)市場調(diào)研，為客戶提供的解決方案。

    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>這一段落不會被顯示出來</p>

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

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

    </body>

    </html>

    display:block

    塊級元素

    <!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塊級元素</p>

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

    <p>塊級元素的特點(diǎn)：元素的內(nèi)容會充滿整行</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)容會顯示在它傍邊，當(dāng)窗口整行不夠顯示時(shí)，內(nèi)容會換行顯示。</div>

    </body>

    </html>

    display:inline-block

    行內(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-block

    }

    </style>

    </head>

    <body>

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

    <div>行內(nèi)塊級元素的特性是獨(dú)占一行，內(nèi)容不會撐開整行</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í)元素會作為列表顯示</var></div>

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

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

    </body>

    </html>

    display:inherit

    繼承父級元素的屬性

    <!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)容不會撐開整行</span>

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

    </div>

    </body>

    </html>


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

看完了這篇文章，相信你對“css中display屬性的用法示例”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

分享標(biāo)題：css中display屬性的用法示例
網(wǎng)頁路徑：http://www.chinadenli.net/article2/joidic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)公司、定制網(wǎng)站、品牌網(wǎng)站制作、虛擬主機(jī)、網(wǎng)頁設(shè)計(jì)公司、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

成都網(wǎng)站建設(shè)公司