過(guò)去的10天，我花費(fèi)了大量時(shí)間學(xué)習(xí)CSS里最常用的元素之一，即div。這個(gè)元素在網(wǎng)頁(yè)設(shè)計(jì)中扮演著重要的角色，可以幫助我們創(chuàng)造出各種有趣、漂亮的頁(yè)面效果。

這是一個(gè)div盒子
這是另一個(gè)div盒子
這是第三個(gè)div盒子

上面的代碼展示了一個(gè)包含三個(gè)子元素的div容器。我們可以使用CSS給每一個(gè)子元素設(shè)置樣式，例如：

.container {
display: flex;
justify-content: center;
align-items: center;
height: 400px;
background-color: lightgrey;
}
.box {
width: 100px;
height: 100px;
margin: 20px;
background-color: white;
border: 2px solid black;
text-align: center;
line-height: 100px;
}

上面的CSS代碼為三個(gè)子元素設(shè)置了寬、高、邊距、背景色、邊框以及文本對(duì)齊方式。而容器本身的display屬性被設(shè)置為flex，可以幫助我們實(shí)現(xiàn)水平居中和垂直居中的效果。

另一個(gè)常用的div效果是層疊布局，可以通過(guò)CSS的position和z-index屬性來(lái)實(shí)現(xiàn)。例如：

這是一個(gè)div盒子
這是另一個(gè)div盒子
這是第三個(gè)div盒子

.container {
position: relative;
}
.box {
width: 100px;
height: 100px;
margin: 20px;
background-color: white;
border: 2px solid black;
text-align: center;
line-height: 100px;
}
.overlay {
position: absolute;
top: 0;
left: 0;
z-index: 1;
background-color: rgba(0, 0, 0, 0.5);
color: white;
}

上面的代碼為第二個(gè)子元素設(shè)置了position為absolute，并使用top和left屬性將其移動(dòng)到了容器的左上角。z-index屬性為1，使其位于第一個(gè)和第三個(gè)子元素之上。同時(shí)，該子元素的背景顏色被設(shè)置為半透明的黑色，文本顏色為白色，可以看作一個(gè)半透明的遮罩層。

總的來(lái)說(shuō)，div是一個(gè)非常實(shí)用的元素，可以幫助我們實(shí)現(xiàn)各種布局和效果。經(jīng)過(guò)這10天的學(xué)習(xí)，我對(duì)它的應(yīng)用也更加靈活熟練了。