眾所周知，網頁布局是網頁設計的重要部分，給網頁注入了幾何美。而CSS布局正是實現網頁各部分位置的技術。下面讓我們具體了解一下。

.box {
display: flex;
}

以上是CSS flex布局，是近年來非常常用的一種布局方式。通過給父元素設置display: flex，子元素的布局方式就變成了flex元素，可以根據具體需求進行控制，如flex-direction可以控制方向。

.box {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}

CSS grid布局近年來也越來越流行。通過給父元素設置display: grid，然后通過grid-template-columns設置子元素各自所占列數，就可以實現復雜的網頁布局了。

.box {
position: absolute;
left: 50%;
transform: translateX(-50%);
}

CSS絕對定位與相對定位也是常用的布局方式。可以通過給元素設置position: absolute或position: relative實現。其中，通過left、top等屬性可以設置具體位置；而transform: translateX(-50%)則是使元素在水平方向上居中。

不同的CSS布局方式對應的應用場景也不同，要根據實際情況選擇合適的布局方式，才能實現美觀且實用的網頁設計。