CSS布局：兩個(gè)div元素垂直排列
在網(wǎng)頁設(shè)計(jì)中，我們經(jīng)常需要將多個(gè)div元素按照一定的布局排列，本文將介紹如何通過CSS實(shí)現(xiàn)兩個(gè)div元素一上一下的布局。
一、使用默認(rèn)塊級元素特性
在HTML中，div元素是塊級元素，默認(rèn)情況下就會(huì)占據(jù)一整行，只需要在HTML文檔中直接書寫兩個(gè)div元素，它們就會(huì)自動(dòng)一上一下排列。
```html
```
二、利用CSS外邊距和內(nèi)邊距
通過CSS的margin和padding屬性，可以微調(diào)兩個(gè)div之間的間距，以達(dá)到更精細(xì)的布局效果，可以設(shè)置上下邊距來確保兩個(gè)div之間有適當(dāng)?shù)目臻g間隔。
```css
div {
margin-top: 10px; /* 上邊距 */
margin-bottom: 10px; /* 下邊距 */
```
三、使用CSS Flexbox布局
對于更復(fù)雜的布局需求，可以使用CSS的Flexbox布局模型，通過將父元素設(shè)置為flex容器，并設(shè)置相應(yīng)的屬性，可以輕松實(shí)現(xiàn)子元素（如兩個(gè)div）的垂直排列。
```css
.container {
display: flex;
flex-direction: column; /* 垂直方向排列 */
```
然后在HTML中應(yīng)用這個(gè)樣式：
```html
```
這樣，兩個(gè)div元素就會(huì)按照垂直方向排列。
四、利用CSS Grid布局
CSS Grid布局是另一種強(qiáng)大的布局系統(tǒng)，適用于創(chuàng)建復(fù)雜的網(wǎng)頁結(jié)構(gòu)，通過定義網(wǎng)格行和列，可以輕松實(shí)現(xiàn)兩個(gè)div一上一下的布局。
```css
.grid-container {
display: grid;
grid-template-rows: auto auto; /* 定義兩行，自動(dòng)分配空間 */
```
同樣地，在HTML中應(yīng)用這個(gè)樣式：
```html
```
通過這種方式，兩個(gè)div會(huì)按照網(wǎng)格布局垂直排列。
實(shí)現(xiàn)兩個(gè)div一上一下的布局有多種方法，可以通過默認(rèn)塊級元素特性、CSS外邊距和內(nèi)邊距、Flexbox布局以及Grid布局來實(shí)現(xiàn)，根據(jù)具體需求和場景選擇合適的方法，可以大大提高網(wǎng)頁布局的效率和美觀度。
