<style>
/* 定義第一個div元素 */
.box1{
width: 200px;  /* 寬度 */
height: 200px;  /* 高度 */
background-color: red;  /* 背景色 */
margin: auto;  /* 居中 */
}
/* 定義第二個div元素 */
.box2{
width: 200px;  /* 寬度 */
height: 200px;  /* 高度 */
background-color: yellow;  /* 背景色 */
margin: auto;  /* 居中 */
margin-top: 50px;  /* 與上方元素距離50px */
}
/* 定義第三個div元素 */
.box3{
width: 200px;  /* 寬度 */
height: 200px;  /* 高度 */
background-color: blue;  /* 背景色 */
margin: auto;  /* 居中 */
margin-top: 50px;  /* 與上方元素距離50px */
}
</style>

上述代碼中，我們定義了三個不同背景顏色的塊級元素，并使用了相同的寬度和高度。我們通過設置margin屬性來控制元素的居中位置和與其他元素之間的距離。

除了margin屬性外，CSS還有很多其他屬性可以用來定義塊級元素。例如，我們可以使用padding屬性來控制元素內部與元素邊緣之間的距離，使用border屬性來定義元素的邊框，使用float屬性來讓元素浮動等等。掌握這些屬性可以讓我們更加靈活地使用CSS來布局和美化網頁。