<div> CSS自學是指通過在線教育平臺、教程、文檔和練習等方式，獨立學習并掌握使用CSS（層疊樣式表）的技能。CSS是一種用于對網頁進行樣式設計和布局的語言，它可以控制網頁的顏色、字體、大小、邊距、排版等各種外觀和布局效果。掌握CSS是網頁設計和前端開發的基礎，對于實現頁面美觀、用戶友好的設計效果至關重要。以下是幾個例子，用來說明CSS中的div的應用和樣式處理。
通過上述例子，我們可以看到div元素在CSS中的廣泛應用。它不僅可以用來創建基本的矩形框，還可以通過嵌套和組合來實現更復雜的布局效果。掌握div元素和相關的CSS屬性和選擇器可以幫助我們更好地進行網頁設計和前端開發工作，實現各種樣式和布局的需求。通過自學CSS，我們可以不斷積累經驗和技能，提升自己在這個領域的能力。
例子1：
<code>
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 200px;
background-color: lightblue;
}
</style>
</head>
<body>
<br>
<div>This is a div element.</div>
<br>
</body>
</html>
</code>上述代碼中，使用了div元素，并通過CSS設置了其寬度、高度和背景顏色。通過給div元素添加樣式規則，我們可以將其轉變為一個有著特定尺寸和背景顏色的矩形框。
例子2：
<code>
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: lightblue;
}
<br>
.container {
width: 500px;
height: 300px;
border: 1px solid black;
}
</style>
</head>
<body>
<br>
<div class="container">
<div>This is a nested div element.</div>
</div>
<br>
</body>
</html>
</code>上述代碼展示了如何使用div元素嵌套。外層的div元素有一個類名為“container”，通過設置寬度、高度和邊框樣式，它可以變成一個帶有邊框的矩形框。內層的div元素則直接嵌套在外層div內部，通過使用不同的樣式，內部的div元素可以有不同的尺寸和背景顏色。這種嵌套和組合的方式可以實現更復雜的布局效果。
例子3：
<code>
<!DOCTYPE html>
<html>
<head>
<style>
.column {
float: left;
width: 33.33%;
padding: 10px;
}
<br>
.row:after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<br>
<div class="row">
<div class="column" style="background-color:#aaa;">
<h2>Column 1</h2>
<p>Some text..</p>
</div>
<div class="column" style="background-color:#bbb;">
<h2>Column 2</h2>
<p>Some text..</p>
</div>
<div class="column" style="background-color:#ccc;">
<h2>Column 3</h2>
<p>Some text..</p>
</div>
</div>
<br>
</body>
</html>
</code>上述代碼展示了如何使用div元素實現網頁布局中的多列效果。通過給每個列添加類名為"column"的樣式規則，利用浮動屬性和百分比寬度，可以使這三個div元素平分整個容器的寬度。同時，為外層div元素添加類名為"row"的樣式規則，并將其設置為可以清除浮動，這樣可以確保多個列正確地排列在一行中。
通過上述例子，我們可以看到div元素在CSS中的廣泛應用。它不僅可以用來創建基本的矩形框，還可以通過嵌套和組合來實現更復雜的布局效果。掌握div元素和相關的CSS屬性和選擇器可以幫助我們更好地進行網頁設計和前端開發工作，實現各種樣式和布局的需求。通過自學CSS，我們可以不斷積累經驗和技能，提升自己在這個領域的能力。