CSS框模型是指將內(nèi)容分層展現(xiàn)，以方便對頁面布局進(jìn)行控制的方式。它將元素看作一個帶有外邊距、內(nèi)邊距、邊框和實際內(nèi)容的方塊。

當(dāng)瀏覽器渲染網(wǎng)頁時，CSS框模型會基于以下4個方面來控制每個元素的大小和布局。

1. 內(nèi)容（content）: 指網(wǎng)頁元素自己的實際內(nèi)容區(qū)域，一般由文本、圖片、視頻等生成。
2. 內(nèi)邊距（padding）: 指網(wǎng)頁元素的內(nèi)部留白，影響內(nèi)容和邊框之間的距離。
3. 邊框（border）: 指網(wǎng)頁元素周圍的線框，邊框可以設(shè)定厚度、樣式和顏色等。
4. 外邊距（margin）: 指網(wǎng)頁元素和其他元素之間的留白，影響元素之間的距離。

CSS框模型中共有兩種形式：標(biāo)準(zhǔn)框模型和IE框模型。

標(biāo)準(zhǔn)框模型下的元素寬度是由內(nèi)容（content）、內(nèi)邊距（padding）、邊框（border）三部分組成，不包括外邊距（margin）。而IE框模型下的元素寬度是由內(nèi)容（content）、內(nèi)邊距（padding）、邊框（border）和外邊距（margin）四部分組成。

標(biāo)準(zhǔn)框模型： 
|--------content--------|
|--------padding--------|
|--------border--------|
IE框模型： 
|--------content--------|
|--------padding--------|
|--------border--------|
|--------margin--------

一定要清楚CSS框模型的概念，才能更好的實現(xiàn)頁面布局效果。