這篇文章運用簡單易懂的例子給大家介紹css中display block的使用方法，代碼非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

在成都網站制作、成都網站建設中從網站色彩、結構布局、欄目設置、關鍵詞群組等細微處著手，突出企業(yè)的產品/服務/品牌，幫助企業(yè)鎖定精準用戶，提高在線咨詢和轉化，使成都網站營銷成為有效果、有回報的無錫營銷推廣。創(chuàng)新互聯(lián)專業(yè)成都網站建設10年了，客戶滿意度97.8%，歡迎成都創(chuàng)新互聯(lián)客戶聯(lián)系。

先來看看塊級和行內元素的概念：

塊級元素：占據一定矩形空間，可以通過設置高度、寬度、內外邊距等屬性，來調整的這個矩形；

行內元素 ：自己的獨立空間，它是依附于其他塊級元素存在的，因此，對行內元素設置高度、寬度、內外邊距等屬性，都是無效的。

display:block的介紹

css中的display是設置元素顯示的方式,block是一塊狀元素的方式顯示，簡單的來說就是設置display:block就是將元素顯示為塊級元素。

看完了display:block的意思后，如果你還是不太了解，那么我們接著就往下看，看看display:block怎么用，通過display:block的用法來更進一步的認識display:block的意思。

display:block的用法：

對于所有的塊級元素來說都是不需要用display:block來定義的，因為塊級元素的默認屬性就是block；所以display:block比較常用于像是和等不是塊級元素的元素中，下面我們就來看看具體的示例：

    
    
    


    創(chuàng)新互聯(lián)
        創(chuàng)新互聯(lián)
    創(chuàng)新互聯(lián)

上述代碼是沒有用display:block來定義的，效果如下：

從上面的效果圖可以很明顯的看到，對span設置寬高是沒有用的，而且內容都處于同一行，下面我們來看看用display:block定義會是怎樣的，代碼如下：

    
    
    


    創(chuàng)新互聯(lián)
        創(chuàng)新互聯(lián)
    創(chuàng)新互聯(lián)

使用display:block的效果如下：

上述效果可以很明顯看到對寬高設置有效了并且也都獨占于一行。

關于css中display block的使用方法就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。