CSS是一種用于增強HTML樣式和布局的語言。其中，CSS布局模型是指將HTML元素按照一定規律進行排列的方法。本文將介紹一下常用的幾種CSS布局模型。

1. 盒子模型

.box {
width: 200px;
height: 200px;
padding: 10px;
border: 1px solid #000;
margin: 20px;
box-sizing: content-box;
}

盒子模型是CSS應用最為廣泛的模型之一。它將HTML元素看做一個矩形盒子，包括內容、內邊距、邊框和外邊距等部分組成。這四個部分的寬度可以通過CSS進行設置，可以通過box-sizing屬性來指定width和height的計算方式，分為box-sizing: content-box（默認） 和 box-sizing: border-box 兩種模式。

2. 定位模型

.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
left: 0;
}

定位模型指的是通過修改元素的定位屬性（position）來進行頁面布局。一般來說，使用絕對定位（position: absolute）或固定定位（position: fixed）可以將元素擺放在相對于父元素或頁面的指定位置上。

3. 彈性盒子模型

.flex-container {
display: flex;
justify-content: center;
align-items: center;
}
.flex-item {
width: 100px;
height: 100px;
margin: 10px;
}

彈性盒子模型是一種基于彈性布局的CSS布局模型。它可以通過display: flex屬性來定義一個容器，容器內的子元素可以通過設置flex屬性進行自適應伸縮和對齊方式的調整。彈性盒子模型簡化了頁面布局的復雜度，使得開發者可以更加方便地進行頁面布局和可視化排版。

總結

以上是三種常見的CSS布局模型，每一種模型都有其適用場景和實現方法。開發者可以根據自己的需求和實際情況選擇合適的布局模型來進行頁面開發和樣式設計。