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

創(chuàng)新互聯(lián)建站是專業(yè)的石景山網(wǎng)站建設(shè)公司，石景山接單;提供網(wǎng)站設(shè)計制作、成都做網(wǎng)站,網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行石景山網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊,希望更多企業(yè)前來合作!

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

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

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

    
    
    



    

        
1
        
2
        
3
        
4
        
5
    

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

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

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

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

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

    
    
    



    
a元素不會顯示出來
    

        
1
        
2
        
3
        
4
        
5
    

效果如下圖3：

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

三、css display inline屬性介紹

    
    
    


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