CSS 核模型是指在瀏覽器解析 HTML 文檔的過程中，如何渲染頁面的一種規(guī)則，它規(guī)定了頁面的包含元素的寬度和高度的計(jì)算方式。

box-sizing: content-box | border-box;

box-sizing 屬性用于設(shè)置元素的 CSS 盒模型，它有兩個(gè)值，分別是 content-box 和 border-box。

當(dāng) box-sizing 屬性設(shè)置為 content-box 時(shí)，元素的寬度和高度只會包含其內(nèi)容的寬度和高度，不包括內(nèi)邊距和邊框。

div {
box-sizing: content-box; /* 默認(rèn)值 */
width: 200px;
height: 100px;
padding: 10px;
border: 1px solid black;
}

當(dāng) box-sizing 屬性設(shè)置為 border-box 時(shí)，元素的寬度和高度會包含其內(nèi)容的寬度和高度、內(nèi)邊距和邊框的寬度。

div {
box-sizing: border-box;
width: 200px;
height: 100px;
padding: 10px;
border: 1px solid black;
}

從上面的代碼我們可以看出，當(dāng) box-sizing 屬性為 content-box 時(shí)，元素的寬度和高度為 200px 和 100px，實(shí)際寬度和高度應(yīng)該為 222px 和 122px（寬度為 200px + 10px + 10px + 1px + 1px，高度為 100px + 10px + 10px + 1px + 1px）。

而當(dāng) box-sizing 屬性為 border-box 時(shí)，元素的寬度和高度為 200px 和 100px，實(shí)際寬度和高度為 200px 和 100px，內(nèi)邊距和邊框?qū)挾葧脑氐膶挾群透叨戎袦p去。

CSS 核模型是頁面布局中重要的一部分，學(xué)習(xí)它可以讓我們更好地掌握頁面布局的技巧，提高頁面的可維護(hù)性和可擴(kuò)展性。