在 CSS 中，邊框是一種常用的樣式效果，但是在計(jì)算元素的大小和位置時(shí)，我們往往會(huì)忽略邊框所占據(jù)的空間。實(shí)際上，邊框也會(huì)算在元素的寬度和高度內(nèi)，而這一點(diǎn)對(duì)于布局和計(jì)算尺寸十分重要。

.box {
width: 200px;
height: 100px;
border: 1px solid #000;
}

上述代碼中，我們定義了一個(gè)名為 box 的元素，它的寬度為200像素，高度為100像素，同時(shí)設(shè)置了1像素的黑色實(shí)線邊框。但是，如果我們只是簡(jiǎn)單地計(jì)算元素寬度和高度，那么邊框的空間也需要計(jì)算在內(nèi)。

在標(biāo)準(zhǔn)盒模型中，元素的寬度和高度由內(nèi)容區(qū)域、內(nèi)邊距、邊框、外邊距四個(gè)部分組成。而在 IE 盒模型中，元素的寬度和高度只包括內(nèi)容和內(nèi)邊距，邊框和外邊距都是在寬度和高度之外計(jì)算的。

如果我們想讓邊框的寬度不影響元素的總寬度和高度，可以使用盒模型的屬性 box-sizing，并將其設(shè)置為 border-box。這樣一來(lái)，元素的寬度和高度就會(huì)包含邊框的寬度。

.box2 {
width: 200px;
height: 100px;
border: 1px solid #000;
box-sizing: border-box;
}

通過(guò)上述代碼，我們創(chuàng)建了一個(gè)與上文示例相同的元素，但我們將 box-sizing 屬性設(shè)置為 border-box，這樣元素寬度和高度就不會(huì)包括內(nèi)邊距和邊框。在實(shí)際開發(fā)中，如果我們需要在計(jì)算元素大小時(shí)考慮邊框，那么使用 border-box 盒模型是更好的選擇。