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

創(chuàng)新互聯(lián)建站專注于吳起網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠為您提供吳起營銷型網(wǎng)站建設(shè)，吳起網(wǎng)站制作、吳起網(wǎng)頁設(shè)計(jì)、吳起網(wǎng)站官網(wǎng)定制、重慶小程序開發(fā)公司服務(wù)，打造吳起網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供吳起網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

先來看看塊級(jí)和行內(nèi)元素的概念：

塊級(jí)元素：占據(jù)一定矩形空間，可以通過設(shè)置高度、寬度、內(nèi)外邊距等屬性，來調(diào)整的這個(gè)矩形；

行內(nèi)元素 ：自己的獨(dú)立空間，它是依附于其他塊級(jí)元素存在的，因此，對(duì)行內(nèi)元素設(shè)置高度、寬度、內(nèi)外邊距等屬性，都是無效的。

display:block的介紹

css中的display是設(shè)置元素顯示的方式,block是一塊狀元素的方式顯示，簡(jiǎn)單的來說就是設(shè)置display:block就是將元素顯示為塊級(jí)元素。

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

display:block的用法：

對(duì)于所有的塊級(jí)元素來說都是不需要用display:block來定義的，因?yàn)閴K級(jí)元素的默認(rèn)屬性就是block；所以display:block比較常用于像是和等不是塊級(jí)元素的元素中，下面我們就來看看具體的示例：

    
    
    


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

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

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

    
    
    


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

使用display:block的效果如下：

上述效果可以很明顯看到對(duì)寬高設(shè)置有效了并且也都獨(dú)占于一行。

關(guān)于css中display block的使用方法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

網(wǎng)站名稱：css中displayblock的使用方法-創(chuàng)新互聯(lián)
瀏覽路徑：http://weahome.cn/article/dchgpd.html