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

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

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

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

    
    
    



    

        
1
        
2
        
3
        
4
        
5
    

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

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

那么大家通過(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屬性具體示例介紹

    
    
    



    
a元素不會(huì)顯示出來(lái)
    

        
1
        
2
        
3
        
4
        
5
    

效果如下圖3：

從圖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屬性介紹

    
    
    


    
p標(biāo)簽是塊級(jí)元素。
    
此時(shí)顯示為內(nèi)聯(lián)元素，不換行。