CSS布局是前端開發中不可避免的重要部分。它可以控制網頁中內容的位置、大小和排列方式，以及響應式布局的實現。以下是關于CSS布局的一些筆記。

盒模型

.box {
width: 200px;
height: 200px;
margin: 10px;
padding: 20px;
border: 1px solid black;
}

盒模型由content、padding、border和margin組成，它們一起構成了元素的大小和位置。

浮動

.box {
float: left;
}

浮動可以使元素脫離文檔流，效果類似于將元素放在水中漂浮。浮動的元素可以左右移動，但是需要注意浮動元素對其他元素的影響。

清除浮動

.clearfix::after {
content: '';
display: table;
clear: both;
}

當浮動元素與其他元素產生沖突時，可以使用清除浮動的方法來解決。使用偽元素::after添加一個空元素，然后使用clear:both來清除之前的浮動效果。

彈性布局

.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}

彈性布局可以很好地解決響應式布局的問題，可以實現元素的自適應和位置調整。使用display:flex來設定彈性布局，使用flex-direction來設置主軸方向，justify-content來控制主軸對齊方式，align-items來控制交叉軸對齊方式。

網格布局

.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto auto;
}

網格布局可以將整個頁面劃分為網格，對每個網格進行排列。網格布局可以很好地實現響應式布局，可以很容易地進行調整和擴展。使用display:grid來設定網格布局，使用grid-template-columns和grid-template-rows來設定列和行的大小和數量。

以上是關于CSS布局的一些筆記，希望對您有所幫助。