CSS中的display屬性有多個(gè)值,其中一個(gè)是block。它表示將一個(gè)元素顯示為一個(gè)塊級(jí)元素。
{ display: block; }
塊級(jí)元素會(huì)在頁(yè)面中按照垂直方向排列,并且默認(rèn)情況下會(huì)占據(jù)其父元素的整個(gè)寬度。塊級(jí)元素通常用于排版網(wǎng)頁(yè)中的主要結(jié)構(gòu)元素,如標(biāo)題、段落、列表、表格等。
以下是一些常見(jiàn)的塊級(jí)元素:
- h1~h6頭部標(biāo)簽
- p段落標(biāo)簽
- ul、ol列表標(biāo)簽
- table表格標(biāo)簽
- div用于分區(qū)塊的標(biāo)簽
我們可以使用block屬性來(lái)改變某些元素的默認(rèn)屬性,例如可以將一個(gè)inline元素轉(zhuǎn)換為block元素,以便它可以占據(jù)整個(gè)行的寬度:
.inline { display: inline; } .block { display: block; } div { background-color: gray; color: white; }
我是inline元素我也是inline元素
我是block元素我也是block元素
以上代碼將展示兩行元素,第一行為兩個(gè)inline元素,第二行為兩個(gè)block元素。可以看出,inline元素不會(huì)占據(jù)整個(gè)行的寬度,而block元素會(huì)占據(jù)整個(gè)行的寬度。
總之,block元素通常用于創(chuàng)建網(wǎng)頁(yè)的基礎(chǔ)布局結(jié)構(gòu),并用于排列列表、表格等元素。同時(shí),通過(guò)改變?cè)氐膁isplay屬性,我們可以輕松地將元素從默認(rèn)的inline轉(zhuǎn)換為block,并以此改變?cè)氐膶挾群透叨取?/p>