CSS框模型是CSS布局的基礎，它描述了一個HTML元素在頁面中的盒子模型，可以用來設置元素的尺寸、邊框、填充和外邊距。

.box {
width: 200px;
height: 100px;
padding: 20px;
margin: 10px;
border: 2px solid #ccc;
}

在上述代碼中，.box類代表一個元素，它被設置了寬200px、高100px，并且有20px的內邊距（padding）、10px的外邊距（margin）和2px的邊框（border）。

在CSS框模型中，每個元素都被視為一個盒子，該盒子由四個部分組成：內容區域、內邊距區域、邊框區域和外邊距區域。其中，內容區域包含了元素的所有內容，內邊距區域是內容區域和邊框之間的空間，邊框區域是邊框周圍的空間，外邊距區域是盒子與其他元素之間的距離。

可以通過設置CSS屬性來控制盒子模型的尺寸和外觀。例如，可以使用width和height屬性來設置內容區域的大小，使用padding和margin屬性來設置內邊距和外邊距的尺寸，使用border屬性來設置邊框的類型、寬度和顏色。

總的來說，CSS框模型提供了一種靈活的布局方式，可以使用它來創建各種不同的布局效果。對于web設計師和開發者來說，了解CSS框模型的基本原理是非常重要的。