CSS塊級(jí)元素是指那些默認(rèn)情況下會(huì)獨(dú)占一行的HTML元素,例如div、h1、p等元素。塊級(jí)元素具有以下特性:
p { display: block; width: 100%; margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0; }
其中,display屬性值為block,表示將p元素設(shè)置為塊級(jí)元素,使它默認(rèn)占據(jù)整個(gè)父容器的寬度。而width屬性值為100%,則使得這個(gè)塊級(jí)元素水平方向上占據(jù)全部空間。
margin屬性則控制p元素與其它元素之間的空隙。在上下方向上,它們被設(shè)為1em,也就是一個(gè)字體大小的距離;而在左右方向上,則被歸零。這些屬性的值可以根據(jù)需求進(jìn)行修改。
塊級(jí)元素還有另一個(gè)特點(diǎn),那就是它們可以包含其它塊級(jí)元素或行內(nèi)元素。例如,一個(gè)div可以內(nèi)嵌多個(gè)p元素,并且它們會(huì)自動(dòng)從上到下排列。
div { display: block; width: 80%; margin: 0 auto; }
另外,塊級(jí)元素還可以使用margin和padding屬性來進(jìn)一步控制它們的樣式。例如,通過為一個(gè)div元素設(shè)置margin:0 auto,可以使它居中顯示在父容器中。
總之,CSS塊級(jí)元素是用來構(gòu)建網(wǎng)頁(yè)布局的基礎(chǔ),因此掌握它們的特點(diǎn)和樣式效果是非常重要的。