CSS（Cascading Style Sheets）是網頁設計中不可或缺的一部分。它為網頁提供了樣式和布局，從而使網頁更具可讀性和可視性。

CSS模型是理解CSS如何工作的重要基礎之一。CSS模型描述了網頁中HTML元素和CSS屬性之間的關系。

CSS模型主要包括盒模型、定位模型和層疊模型。

/* 盒模型 */
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 1px solid #000;
margin: 10px;
}

盒模型描述了HTML元素的布局方式。每個HTML元素被描述為一個矩形盒子，包含內容區域、內邊距、邊框和外邊距。盒子的大小可以通過CSS的width和height屬性來控制，內邊距和邊框可以通過padding和border屬性來設置，外邊距可以通過margin屬性來設置。

/* 定位模型 */
.position {
position: relative;
top: 50px;
left: 100px;
}

定位模型描述了HTML元素的位置。HTML元素可以采用相對定位、絕對定位或固定定位的方式來放置在網頁中。相對定位相對于元素本身原來的位置進行定位，絕對定位相對于其最近的已定位祖先元素進行定位，固定定位相對于瀏覽器窗口進行定位。

/* 層疊模型 */
.z-index {
position: relative;
z-index: 1;
}

層疊模型描述了HTML元素之間的疊放順序。HTML元素被認為是一個層疊上下文，其z-index屬性可以控制其在層疊上下文中的位置。z-index值越大，元素越靠近頂部。

在設計網頁時，深入理解CSS模型將有助于您更好地控制樣式和布局，并創建出令人滿意的網頁。