CSS是網頁設計中的必備技能之一，而布局則是CSS的重要內容之一。CSS提供了幾種布局方式，包括傳統的盒子布局、浮動布局和彈性布局。本文將詳細介紹這三種布局方式。 盒子布局 盒子布局是網頁設計中最基礎的布局方式，也是最常用的一種。它使用CSS中的盒模型來實現布局。故名思意，盒子布局就是根據HTML元素的盒模型在頁面中進行定位排列。盒子布局分為標準盒子布局和IE盒子布局，其中標準盒子布局與CSS規范的盒子模型一致，而IE盒子布局則通過box-sizing屬性實現盒子模型的不同。 下面是代碼示例：

.box {
width: 200px;
height: 200px;
border: 1px solid #000;
padding: 10px;
margin: 10px;
box-sizing: border-box; /*IE盒子模型*/
}

浮動布局 浮動布局是一種相對靈活的布局方式，它使用CSS中的float屬性實現元素的定位和排列。通過將元素浮動到指定位置，可以實現頁面中元素的多列布局，以及文字環繞圖片等復雜的布局效果。 下面是代碼示例：

.box {
float: left;
width: 200px;
height: 200px;
margin-right: 10px;
}

彈性布局 彈性布局是CSS中最新的一種布局方式。它使用flexbox（彈性盒子）模型來實現元素的定位和排列。彈性布局具有非常強的適應性和靈活性，可以在不同的設備、屏幕尺寸和瀏覽器窗口大小下自動調整元素的尺寸和位置。 下面是代碼示例：

.container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.box {
flex: 1;
height: 200px;
margin: 10px;
}

總結 以上就是CSS中的三種布局方式，它們分別是盒子布局、浮動布局和彈性布局。每種布局方式都具有自己的特點和適用場景，開發者需要根據實際需求選擇最合適的布局方式。