CSS布局設計是構建網頁基礎的重要技能。在學習CSS布局設計之前，首先了解基本的HTML標記和CSS樣式是必須的。
HTML的基礎標記是塊（block）和內聯（inline）元素。塊元素以新行開始，并占據整個可用寬度。內聯元素在行內顯示，只占據必要的寬度。CSS可以用于調整尺寸、位置和外觀，使網頁更美觀和易于導航。
基本的CSS布局是指在網頁中放置各種元素的技術。 這包括使用div和其他HTML元素（如header、nav、section和footer）作為占位符，以便從結構上劃分頁面。
下面是幾個基本的CSS布局：
1.流式布局
流式布局是指通過設置百分比寬度來實現自適應的布局。例如：

在這個例子中，三列占據了它們所有的寬度并且在同一行內顯示。這種布局對不同尺寸的屏幕都能夠適應。
2.柵格系統布局
柵格系統布局是指使用CSS柵格系統布局，該系統將整個頁面劃分為若干列，并且該列具有相同的寬度和間隔。例如：

在這個例子中，每個列都是類“ col-4”的DIV元素。container類的DIV元素是一個容器，它包含整個布局。對于每個行，可以使用一個類“ row”的DIV元素，以便將每個列放在同一行內。
3.定位布局
在定位布局中，使用CSS的絕對和相對定位以及定位元素的屬性來確定元素的位置。例如：

在這個例子中，兩個DIV元素都具有絕對定位，這意味著它們的位置是相對于它們的父元素確定的。其中一個DIV元素位于左上角，而另一個DIV元素位于右上角。
總之，這幾種基本的CSS布局是網頁設計中非常重要的，尤其是對于開發響應式網頁設計時。掌握這些基本布局將大大加強您的網頁設計技能。