CSS框模型是用于設計和布局網頁中元素的基本工具之一。使用CSS框模型可以完全控制HTML元素的尺寸、位置、內邊距和外邊距。CSS框模型分為兩種：W3C盒模型和IE盒模型。

/* W3C盒模型 */
div {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid black;
margin: 10px;
}

W3C盒模型指的是標準的CSS盒模型。它將元素的尺寸定義為內容尺寸，再在內容尺寸的基礎上加上內邊距、邊框和外邊距。在上面的代碼中，div元素的內容尺寸為200x100px，加上內邊距和邊框之后的尺寸為250x150px，再加上外邊距之后的尺寸為270x170px。

/* IE盒模型 */
div {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid black;
margin: 10px;
box-sizing: border-box;
}

IE盒模型將元素的尺寸定義為包含邊框和內邊距的盒子尺寸。在上面的代碼中，div元素的盒子尺寸為200x100px，加上外邊距之后的尺寸為220x120px。

通過使用CSS框模型，我們可以根據(jù)實際需求來選擇不同的盒模型，從而更好地控制元素的尺寸和排列。同時，我們也可以通過設置內邊距和外邊距來改變元素的樣式和布局，實現(xiàn)更加豐富的網頁效果。