CSS是前端開發中不可或缺的一部分，其中塊元素在網頁布局中扮演了重要的角色。塊元素通常默認占據一整行，因此在網頁排版中可以起到承載內容的重要作用。

/* 定義塊元素樣式 */
div {
display: block;
width: 100px;
height: 50px;
background-color: yellow;
border: 1px solid black;
margin: 10px;
padding: 5px;
}

上述代碼定義了一個div塊元素的樣式，其中display屬性的值為block，表示該元素為塊元素。塊元素占據一整行，因此可以設置寬度、高度、背景顏色及邊框等樣式。塊元素還可以設置margin及padding屬性，來調整與周圍元素的間距以及內部內容與邊框的距離。

除了div元素以外，還有許多常用的塊元素，例如p、ul、li、h1-h6等。其中，p元素通常用于段落的排版，ul和li元素可以用于列表的排版，而h1-h6元素可以用于標題的排版。

/* 定義p元素樣式 */
p {
display: block;
font-size: 16px;
line-height: 1.5;
margin: 10px;
}
/* 定義ul、li元素樣式 */
ul {
display: block;
margin: 10px;
padding: 0;
}
li {
display: block;
list-style-type: disc;
margin: 5px 0;
}
/* 定義h1-h6元素樣式 */
h1, h2, h3, h4, h5, h6 {
display: block;
margin: 10px;
padding: 0;
}

在使用塊元素時需要注意的是，塊元素默認占據一整行，因此在布局時需要進行適當的調整。另外，塊元素還可以通過使用inline-block屬性來實現塊級元素和行內元素的功能結合，實現更加豐富的布局形式。

總之，塊元素在網頁布局中扮演了重要的角色，通過設置樣式來調整元素外觀和布局，能夠為網頁提供更加優美和靈活的設計效果。