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

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

從事德陽機房托管，服務器租用，云主機，虛擬空間，國際域名空間，CDN，網絡代維等服務。

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

接下來我們通過具體的代碼實例來一一詳解css display屬性用法。

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css display:block屬性實例</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>

以上代碼通過瀏覽器訪問，效果如圖1：

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

我們把a標簽中的display:block;屬性注釋掉，其效果如圖2：

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

那么大家通過圖1 和圖2的比較可以發(fā)現，圖1中因為設置了display:block屬性，a中元素塊能顯示寬高以及內外邊距設置。而圖2中只是把display block屬性去掉，就導致全部元素塊不能設置寬高。

也就是說display block屬性可以將行內元素設置為塊級元素，隨后設置它的寬高和上下左右的內外邊距padding和margin?？梢酝ㄟ^這個屬性進而達到我們想要的效果。

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css display:none屬性實例</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元素不會顯示出來</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ā)現，我們在給a設置了display:none;屬性后，其所有元素就隱藏了不會顯示出來。所以顯然決定display 隱藏 顯示的屬性值就是none屬性。display none通常會被用在導航欄一二級欄目的設計上。

三、css display inline屬性介紹

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css display:inline屬性實例</title>
    <style>
        p {display: inline}
     </style>
</head>
<body>
    <p>p標簽是塊級元素。</p>
    <p>此時顯示為內聯元素，不換行。</p>
</body>
</div>
</body>
</html>

效果如下圖4：

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

從圖4可以知道，css display inline屬性就是可以將元素變成內聯元素也就是行內元素，并且元素前后沒有換行符。

四、css  display inline-block屬性介紹

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

關于css display屬性就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果喜歡這篇文章，不如把它分享出去讓更多的人看到。

分享標題：cssdisplay屬性有幾種？怎么用？-創(chuàng)新互聯
網站路徑：http://muchs.cn/article10/dpspgo.html

成都網站建設公司_創(chuàng)新互聯，為您提供關鍵詞優(yōu)化、網站建設、網站設計、響應式網站、微信公眾號、軟件開發(fā)

廣告

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

成都網頁設計公司