在 CSS 中，邊框是一個(gè)常見的元素，可以為頁面或者元素添加視覺上的分隔線條，讓頁面更加美觀。然而，當(dāng)我們定義了一個(gè)元素的邊框之后，很容易會(huì)發(fā)現(xiàn)整個(gè)元素周圍出現(xiàn)了一些不必要的空白，這是為什么呢？

其實(shí)，這些邊框外側(cè)的空白是由于 CSS 盒模型引起的。盒模型是指在 HTML 元素中，每一個(gè)元素都被看作是一個(gè)矩形的盒子，它由四周的邊界、內(nèi)邊距、元素框和外邊距組成。當(dāng)我們?cè)O(shè)置了一個(gè)元素的邊框后，這個(gè)邊框會(huì)被視為是元素框的一部分，而外邊距會(huì)在元素框的最外側(cè)進(jìn)行渲染。因此，這樣就造成了邊框外側(cè)的空白。

那么，如何解決這個(gè)問題呢？

div {
box-sizing: border-box;
}

我們可以通過 box-sizing 屬性來解決這個(gè)問題。box-sizing 屬性可以改變盒模型計(jì)算值的方式，它有以下兩個(gè)取值：

• content-box：默認(rèn)值，計(jì)算時(shí)不包含內(nèi)邊距和邊框，元素寬度=內(nèi)容寬度+內(nèi)邊距+邊框
• border-box：計(jì)算時(shí)包含內(nèi)邊距和邊框，元素寬度=內(nèi)容寬度

將元素的 box-sizing 屬性設(shè)置為 border-box 后，元素的邊框會(huì)被視為元素框的一部分，而不會(huì)再占用額外的空間。這樣我們就可以避免邊框外側(cè)出現(xiàn)的空白啦。