CSS是我們在網頁設計中常用的一個工具，它可以幫助我們改變網頁的樣式。其中，塊狀元素也是我們經常使用到的一種元素，它們一般用于網頁內容的布局。下面我們就來介紹一些常見的塊狀元素。

/* div元素 */
div {
background-color: #ccc;
width: 50%;
height: 200px;
margin: 0 auto;
/*居中*/
}
/* p元素 */
p {
color: #333;
font-size: 16px;
line-height: 24px;
margin-bottom: 20px;
}
/* ul元素 */
ul {
list-style-type: none;
margin: 0;
padding: 0;
/*去除默認的縮進和符號*/
}
/* li元素 */
li {
margin-bottom: 10px;
/*下方添加10px的間距*/
}
/* h1元素 */
h1 {
font-size: 32px;
margin-bottom: 20px;
/*下方添加20px的間距*/
}
/* form元素 */
form {
display: block;
margin-bottom: 20px;
}
/* input元素 */
input {
display: block;
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 3px;
box-sizing: border-box;
margin-bottom: 10px;
/*添加10px的間距*/
}

通過以上的代碼，我們可以看到，塊狀元素可以通過CSS屬性進行樣式的設置。比如，我們可以設置一個div元素的背景顏色、寬度、高度、居中等屬性，這樣就可以讓div元素作為一個容器來進行內容的布局。

除了div元素以外，我們還可以通過p、ul、li、h1、form、input等元素來進行網頁內容的布局。比如，我們可以設置p元素的字體顏色、字號、行高和下方的間距，這樣就可以讓內容更加清晰明了。同樣的，我們也可以設置ul和li元素來實現網頁內容的列表。設置h1元素可以讓我們的網頁更加規范，而對于表單中的元素，我們也可以根據需求進行設置。

總之，通過CSS的塊狀元素，我們可以輕松地進行網頁布局的實現。掌握這些基本的元素和屬性，可以讓我們在網頁設計中更加得心應手。