CSS盒子模型是用于布局和定位網(wǎng)頁(yè)元素的基本概念。它描述了一個(gè)元素在網(wǎng)頁(yè)中的尺寸、邊框、內(nèi)邊距和外邊距之間的關(guān)系。

每個(gè)HTML元素都可以被看作是一個(gè)矩形的盒子，其中包含內(nèi)容、內(nèi)邊距、邊框和外邊距。CSS盒子模型定義了這些組成部分的尺寸和相互關(guān)系。

在CSS中，有兩種盒子模型：標(biāo)準(zhǔn)盒子模型和IE盒子模型。

1、標(biāo)準(zhǔn)盒子模型（Standard Box Model）

標(biāo)準(zhǔn)盒子模型是CSS的默認(rèn)盒子模型。在標(biāo)準(zhǔn)盒子模型中，一個(gè)元素的總寬度（width）和總高度（height）由內(nèi)容區(qū)域（content）、內(nèi)邊距（padding）、邊框（border）組成。換句話說(shuō)，元素的寬度和高度不包括內(nèi)邊距和邊框。

標(biāo)準(zhǔn)盒子模型的計(jì)算公式：

總寬度 = 內(nèi)容寬度（width） + 左內(nèi)邊距（padding-left） + 右內(nèi)邊距（padding-right） + 左邊框?qū)挾龋╞order-left） + 右邊框?qū)挾龋╞order-right）總高度 = 內(nèi)容高度（height） + 上內(nèi)邊距（padding-top） + 下內(nèi)邊距（padding-bottom） + 上邊框?qū)挾龋╞order-top） + 下邊框?qū)挾龋╞order-bottom）

2、IE盒子模型（IE Box Model）

IE盒子模型是早期Internet Explorer瀏覽器（IE5及以下版本）采用的盒子模型。在IE盒子模型中，元素的總寬度和總高度包括了內(nèi)容區(qū)域（content）、內(nèi)邊距（padding）和邊框（border）。

IE盒子模型的計(jì)算公式：

總寬度 = 內(nèi)容寬度（width） + 左內(nèi)邊距（padding-left） + 右內(nèi)邊距（padding-right） + 左邊框?qū)挾龋╞order-left） + 右邊框?qū)挾龋╞order-right）總高度 = 內(nèi)容高度（height） + 上內(nèi)邊距（padding-top） + 下內(nèi)邊距（padding-bottom） + 上邊框?qū)挾龋╞order-top） + 下邊框?qū)挾龋╞order-bottom）

現(xiàn)在的瀏覽器中，默認(rèn)使用的是標(biāo)準(zhǔn)盒子模型。如果你希望使用IE盒子模型，可以通過(guò)設(shè)置CSS的box-sizing屬性為border-box來(lái)實(shí)現(xiàn)。

.element {box-sizing: border-box;}

這將使元素采用IE盒子模型，使元素的寬度和高度包括了內(nèi)邊距和邊框。