CSS中的盒子模型包含著頁面中的所有元素，而子盒子則是在一個(gè)大盒子內(nèi)部，可以有若干個(gè)小的盒子用來包含不同元素。

.box {
width: 300px;
height: 200px;
border: 1px solid black;
padding: 20px;
}
.box .inner-box {
width: 100px;
height: 100px;
background-color: blue;
margin-top: 20px;
}

上面的代碼定義了一個(gè)大盒子，寬300像素，高200像素，并且有1像素的黑色邊框。同時(shí)，這個(gè)大盒子內(nèi)部有20像素的padding。

在這個(gè)大盒子內(nèi)部，我們可以定義一個(gè)子盒子，它的寬高為100像素，并且有藍(lán)色的背景色。這個(gè)子盒子相對于大盒子的位置，是通過marging-top屬性實(shí)現(xiàn)的。表示距離大盒子的頂部20像素。

這樣，我們就可以很方便地使用CSS中的盒子模型來構(gòu)建頁面布局，實(shí)現(xiàn)復(fù)雜的排版和設(shè)計(jì)。