CSS 子元素頂對齊和底對齊是網頁布局中經常需要用到的技巧。下面，就讓我們來深入了解一下這兩種對齊方式之間的區別和使用方法。

首先是子元素頂對齊。這種對齊方式是指，將父元素中的所有子元素的頂部與父元素的頂部對齊。如果我們想要使用 CSS 將一個給定的子元素頂部對齊到父元素的頂部，可以使用 'position' 屬性和 'top' 值來實現。例如：

.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
}

上述代碼中，我們將父元素設為相對定位，并將子元素設為絕對定位。然后，將子元素的 'top' 值設置為 0，這樣子元素的頂部就會與父元素的頂部對齊。

接下來是子元素底對齊。這種對齊方式是指，將父元素中的所有子元素的底部與父元素的底部對齊。同樣地，在 CSS 中，我們可以使用 'position' 屬性和 'bottom' 值來實現這種對齊方式。例如：

.parent {
position: relative;
}
.child {
position: absolute;
bottom: 0;
}

上述代碼與頂對齊的代碼很相似。我們同樣將父元素設為相對定位，而將子元素設為絕對定位。不過這一次，我們將子元素的 'bottom' 值設置為 0，這樣子元素的底部就會與父元素的底部對齊。

綜上所述，子元素頂對齊和底對齊都是在網頁布局中十分有用的技巧。無論你是想要在頁面中定位一個元素，還是調整元素之間的間距，這兩種對齊方式都可以幫助你實現。只需要靈活運用 CSS 屬性，你就可以輕松地實現任何你想要的對齊效果。