cssdisplay屬性有幾種？怎么用？-創(chuàng)新互聯(lián)

css display屬性有幾種？怎么用？相信很多新手小白對(duì)css display屬性的了解處于懵懂狀態(tài)，通過(guò)這篇文章的總結(jié)，希望你能收獲更多。如下資料是關(guān)于css display屬性的內(nèi)容。

從事德陽(yáng)機(jī)房托管，服務(wù)器租用，云主機(jī)，虛擬空間，國(guó)際域名空間，CDN，網(wǎng)絡(luò)代維等服務(wù)。

首先我給大家列舉出 css display常用的幾個(gè)值：none、block、inline、inline-block

接下來(lái)我們通過(guò)具體的代碼實(shí)例來(lái)一一詳解css display屬性用法。

一、css display block屬性具體示例介紹

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css display:block屬性實(shí)例</title>
    <style>
        *{padding: 0;margin:0;list-style: none;}
        ul li{float: left;}
        a{
        display:block; 
        width: 30px;height: 30px;
        color:#fff; 
        background: green;margin: 5px; 
        text-decoration: none;
        text-align: center;
        line-height: 30px;
        }
    </style>
</head>
<body>
<div class="demo">
    <ul>
        <li><a href="">1</a></li>
        <li><a href="">2</a></li>
        <li><a href="">3</a></li>
        <li><a href="">4</a></li>
        <li><a href="">5</a></li>
    </ul>
</div>
</body>
</html>

以上代碼通過(guò)瀏覽器訪問(wèn)，效果如圖1：

css display屬性有幾種？怎么用？

我們把a(bǔ)標(biāo)簽中的display:block;屬性注釋掉，其效果如圖2：

css display屬性有幾種？怎么用？

那么大家通過(guò)圖1 和圖2的比較可以發(fā)現(xiàn)，圖1中因?yàn)樵O(shè)置了display:block屬性，a中元素塊能顯示寬高以及內(nèi)外邊距設(shè)置。而圖2中只是把display block屬性去掉，就導(dǎo)致全部元素塊不能設(shè)置寬高。

也就是說(shuō)display block屬性可以將行內(nèi)元素設(shè)置為塊級(jí)元素，隨后設(shè)置它的寬高和上下左右的內(nèi)外邊距padding和margin。可以通過(guò)這個(gè)屬性進(jìn)而達(dá)到我們想要的效果。

二、css display none屬性具體示例介紹

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css display:none屬性實(shí)例</title>
    <style>
        *{padding: 0;margin:0;list-style: none;}
        ul li{float: left;}
        a{
            display: none; width: 30px;height: 30px;color:#fff; background: green;margin: 5px; text-decoration: none;text-align: center;line-height: 30px;}
    </style>
</head>
<body>
<div class="demo">
    <p>a元素不會(huì)顯示出來(lái)</p>
    <ul>
        <li><a href="">1</a></li>
        <li><a href="">2</a></li>
        <li><a href="">3</a></li>
        <li><a href="">4</a></li>
        <li><a href="">5</a></li>
    </ul>
</div>
</body>
</html>

效果如下圖3：

css display屬性有幾種？怎么用？

從圖3可以發(fā)現(xiàn)，我們?cè)诮oa設(shè)置了display:none;屬性后，其所有元素就隱藏了不會(huì)顯示出來(lái)。所以顯然決定display 隱藏顯示的屬性值就是none屬性。display none通常會(huì)被用在導(dǎo)航欄一二級(jí)欄目的設(shè)計(jì)上。

三、css display inline屬性介紹

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css display:inline屬性實(shí)例</title>
    <style>
        p {display: inline}
     </style>
</head>
<body>
    <p>p標(biāo)簽是塊級(jí)元素。</p>
    <p>此時(shí)顯示為內(nèi)聯(lián)元素，不換行。</p>
</body>
</div>
</body>
</html>

效果如下圖4：

css display屬性有幾種？怎么用？

從圖4可以知道，css display inline屬性就是可以將元素變成內(nèi)聯(lián)元素也就是行內(nèi)元素，并且元素前后沒(méi)有換行符。

四、css display inline-block屬性介紹

顧名思義，inline-block屬性肯定是結(jié)合了inline和block屬性的特性，也就是說(shuō)此屬性可以將元素變成行內(nèi)塊元素顯示。既可以讓指定在同一行內(nèi)顯示，又可以設(shè)置其元素的寬度和高度。

關(guān)于css display屬性就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果喜歡這篇文章，不如把它分享出去讓更多的人看到。

分享標(biāo)題：cssdisplay屬性有幾種？怎么用？-創(chuàng)新互聯(lián)
網(wǎng)站路徑：http://www.rwnh.cn/article10/dpspgo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、響應(yīng)式網(wǎng)站、微信公眾號(hào)、軟件開(kāi)發(fā)

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

猜你還喜歡下面的內(nèi)容

内射老阿姨1区2区3区4区_久久精品人人做人人爽电影蜜月_久久国产精品亚洲77777_99精品又大又爽又粗少妇毛片

cssdisplay屬性有幾種？怎么用？-創(chuàng)新互聯(lián)

cssdisplay屬性有幾種？怎么用？-創(chuàng)新互聯(lián)