CSS盒模型是指HTML元素在頁(yè)面中呈現(xiàn)出來(lái)的矩形區(qū)域。這個(gè)矩形區(qū)域由四個(gè)部分組成，包括內(nèi)容區(qū)、內(nèi)邊距區(qū)、邊框區(qū)和外邊距區(qū)。CSS中常常用box-sizing屬性來(lái)定義盒模型。

而CSS觸發(fā)盒模型的機(jī)制則包括兩種，分別為標(biāo)準(zhǔn)模式和怪異模式。標(biāo)準(zhǔn)模式下，盒模型的大小就是元素的width和height值，即內(nèi)容區(qū)的大小；而在怪異模式下，盒模型的大小還包括padding、border和margin的大小。

/*標(biāo)準(zhǔn)模式*/
box-sizing: content-box; 
/*怪異模式*/
box-sizing: border-box;

在標(biāo)準(zhǔn)模式下，當(dāng)我們給一個(gè)元素設(shè)置寬高時(shí)，它的真實(shí)寬度會(huì)被減去padding和border的寬度，從而實(shí)現(xiàn)了響應(yīng)式布局的效果。而在怪異模式下，盒模型的大小則包括了padding和border的值，如果要實(shí)現(xiàn)響應(yīng)式布局需要再次計(jì)算元素的寬高。

由于歷史原因，很多瀏覽器默認(rèn)采用怪異模式，在開發(fā)中我們需要在HTML文檔頭加上聲明，使瀏覽器以標(biāo)準(zhǔn)模式進(jìn)行渲染，從而保證布局的一致性和可預(yù)期性。