CSS是網頁設計中的一門基本技術，其中子元素布局是常見的用法。子元素布局能夠幫助設計者實現各種必要的頁面結構，極大地擴展了網頁設計的能力。下面，我們來詳細學習CSS子元素布局。

首先，我們需要了解一些基礎知識。CSS中的子元素指的是一個元素的子元素，也就是嵌套在該元素內部的元素。在CSS布局中，我們通常通過設置父元素的樣式來控制其內部子元素的布局。

為了能夠更好地理解CSS子元素布局，我們來看一個例子。假設我們有一個HTML結構如下：

<div class="wrapper">
<div class="box box1"><p>Box 1</p></div>
<div class="box box2"><p>Box 2</p></div>
<div class="box box3"><p>Box 3</p></div>
</div>

這是一個基本的容器結構，包含了三個盒子(box1, box2和box3)。我們可以用CSS來實現這些盒子的水平布局：

.wrapper {
display: flex;
justify-content: space-between;
}
.box {
width: 100px;
height: 100px;
background-color: #f7f7f7;
border: 1px solid #ccc;
display: flex;
align-items: center;
justify-content: center;
}
.box p {
margin: 0;
}

通過設置父元素的display屬性值為flex，我們將容器變為了一個彈性盒子。接著，我們使用justify-content屬性設置盒子之間的距離，這里我們使用了space-between方式，使得盒子之間有適當的間隔。然后我們使用了align-items和justify-content屬性來設置盒子內部元素的垂直和水平居中。最后，我們使用了.box p選擇器來去除盒子中的段落元素的margin值，保證樣式效果統一。

通過這個例子，我們可以看到使用CSS子元素布局能夠極大地方便我們的網頁設計工作，不需要進行繁瑣的手動布局。CSS中還有很多其他的子元素布局用法，可以根據實際需要進行學習和使用。