CSS框模型是Web設計中非常重要的一個概念，它描述了網頁中的元素是如何被包圍和影響到的。下面是CSS框模型的主要特點：

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

1. 盒子模型

每個HTML元素在瀏覽器窗口中都被看作是一個矩形的盒子，包含了元素的內容、內邊距、外邊距和邊框等屬性。這個矩形盒子模型就是CSS框模型的基礎。

2. 內邊距

內邊距是指在盒子內容與盒子邊框之間的像素距離，可以用padding屬性來設置。例如上方的box設置了上下左右各20像素的內邊距。

3. 外邊距

外邊距是指盒子與周圍元素之間的像素距離，可以用margin屬性來設置。例如上方的box設置了上下左右各10像素的外邊距。

4. 邊框

盒子的邊框是一個由線條圍成的矩形，可以用border屬性來設置邊框的寬度、樣式和顏色（solid、dashed、dotted等）。例如上方的box設置了1像素的黑色實線邊框。

5. 盒子大小

盒子的大小由元素的width和height屬性來設置，指的是盒子本身的寬度和高度。例如上方的box設置了200像素的寬度和100像素的高度。

6. 實際大小

實際大小指的是元素的最終大小，包括了盒子大小、內邊距、外邊距和邊框等因素。例如上方的box的實際大小為252px x 142px。

在使用CSS框模型時，我們需要清楚每個元素所在的盒子模型及其屬性設置，并根據需要來靈活調整。這對Web設計和頁面布局都非常關鍵。