CSS寫Div

CSS（層疊樣式表）是一種用于控制網頁設計樣式的標記語言，其中可以用來創建和定位頁面中的各種元素。其中一個常用元素就是<div>（或稱為division）元素，它常用于創建塊級元素，用于包圍其他HTML元素，從而可以對這些元素進行樣式上的控制和布局的調整。

案例1：簡單的div元素

下面的代碼演示了如何使用CSS創建一個簡單的div元素：

<code><style>
.myDiv {
width: 200px;
height: 200px;
background-color: #ccc;
}
</style>
<br>
<div class="myDiv"></div></code>

在這個案例中，我們使用了一個CSS樣式類名為“myDiv”來定義div元素的樣式。該div元素的寬度和高度分別為200像素，并且背景顏色設置為灰色。然后，我們使用類名“myDiv”應用這些樣式到<div>元素上。

案例2：帶有文本的div元素

下面的代碼演示了如何將文本添加到一個div元素中：

<code><style>
.myDiv {
width: 200px;
height: 200px;
background-color: #ccc;
text-align: center;
font-size: 18px;
padding: 20px;
}
</style>
<br>
<div class="myDiv">
這是一個帶有文本的div元素。
</div></code>

在這個案例中，我們在原來的案例基礎上添加了一些樣式。，我們使用text-align屬性設置了文本在div元素中的水平對齊方式為居中。然后，使用font-size屬性設置了文本的字體大小為18像素。最后使用padding屬性設置了文字與div元素邊緣的距離為20像素。這樣，我們就創建了一個帶有文本的div元素。

案例3：嵌套div元素

可以將一個div元素嵌套在另一個div元素中，來實現更復雜的布局效果。下面的代碼演示了一個嵌套的div元素：

<code><style>
.outerDiv {
width: 300px;
height: 300px;
background-color: #eee;
display: flex;
justify-content: center;
align-items: center;
}
<br>
    .innerDiv {
width: 200px;
height: 200px;
background-color: #ccc;
display: flex;
justify-content: center;
align-items: center;
}
</style>
<br>
<div class="outerDiv">
<div class="innerDiv">
這是一個嵌套的div元素。
</div>
</div></code>

在這個案例中，我們使用了兩個div元素：外層div元素和內層div元素。外層div元素的樣式使用了display: flex屬性，這使得其成為一個彈性容器，并通過justify-content: center和align-items: center屬性將內部元素居中對齊。內層div元素同樣使用了這些屬性，實現了嵌套div元素的居中對齊效果。

通過這些案例，你可以看到如何使用CSS來創建和定位div元素，并通過添加樣式來實現不同的布局和效果。希望這些代碼示例對你理解如何使用CSS寫div元素有所幫助。