CSS中的div被認為是頁面布局中的基礎構件之一。本篇文章將會探討不同類型的div，以及不同的CSS屬性如何應用于這些div上。

頭部
側邊欄
主要內容
底部

1. 基礎div:

.container {
display: block;
width: 100%;
height: 500px;
border: 1px solid #ccc;
box-sizing: border-box;
}

2. 背景圖片div:

.header {
background-image: url(header.png);
background-repeat: no-repeat;
background-size: contain;
}

3. 漸變背景div:

.sidebar {
background: linear-gradient(to bottom, #6699ff, #99ccff);
}

4. 浮動div:

.content {
float: left;
width: 70%;
height: 100%;
}
.sidebar {
float: right;
width: 30%;
height: 100%;
}

5. 絕對定位div:

.header {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50px;
background-color: #333;
color: #fff;
text-align: center;
line-height: 50px;
}
.content {
position: absolute;
top: 50px;
left: 0;
width: 70%;
height: calc(100% - 50px);
}
.sidebar {
position: absolute;
top: 50px;
right: 0;
width: 30%;
height: calc(100% - 50px);
}
.footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
background-color: #333;
color: #fff;
text-align: center;
line-height: 50px;
}

6. 文字陰影div:

.footer {
text-shadow: 1px 1px 2px #000;
}

7. 圓角div:

.container {
border-radius: 5px;
}

8. 陰影div:

.container {
box-shadow: 2px 2px 5px #000;
}

以上是關于不同類型的div和應用于它們的不同CSS屬性的基本介紹。希望它們能夠幫助您在Web開發中更好地布局和美化您的頁面。