CSS布局分為三塊
CSS是前端開發人員最常用的工具之一，其中最基本的就是使用CSS進行布局。CSS布局可以分為三個主要部分：盒模型、定位和彈性盒子。
盒模型
盒模型是CSS布局的基礎，它定義了元素的內部內容、邊框和內外邊距之間的關系。在CSS中，每個元素都被看作是一個矩形的盒子，這個盒子被分為四個部分：內容區、內邊距區、邊框區和外邊距區。在編寫CSS時，我們可以通過設置元素的padding、border和margin屬性來控制元素的這三個區域的大小。
定位
CSS中的定位主要有兩種：相對定位和絕對定位。相對定位是相對于元素原來的位置進行定位，而絕對定位是相對于其父元素進行定位。通過使用定位，我們可以精確地控制元素在頁面中的位置。在進行定位時，我們需要使用CSS中的position屬性來設置元素的定位屬性為relative（相對定位）或absolute（絕對定位）。
彈性盒子
彈性盒子是一種用于在頁面中創建靈活，響應式布局的CSS布局方式。它使我們可以在不使用浮動或定位的情況下，根據父容器的大小自適應調整子元素的大小和位置。在彈性盒子布局中，我們可以使用各種屬性，如display、flex-wrap、flex-direction和justify-content等，來控制布局。
總結
CSS布局是前端開發中最基本的技能之一。我們可以使用CSS中的盒模型、定位和彈性盒子來控制頁面的布局。通過熟練掌握CSS布局技能，我們可以打造出靈活，響應式的網頁布局，為用戶提供更好的訪問體驗。需要注意的是，在進行CSS布局時，我們應該盡量避免濫用浮動屬性和絕對定位屬性，因為它們可能會導致頁面布局混亂。