在網頁設計中，CSS 的計算寬高是非常重要的內容。下面我們來介紹一下如何通過 CSS 計算元素的寬度和高度。

1. 寬度計算

box-sizing: content-box; /* 默認值 */
width = content 的寬度
width = 內容區(qū)寬度 + 左右padding + 左右border + 左右margin

box-sizing: border-box;
width = 元素CSS寬度
width = 內容區(qū)寬度

box-sizing 屬性有兩個值：content-box 和 border-box。

content-box 是默認值，表示元素的寬度只包括內容的寬度，不包括邊框和內邊距等。

border-box 表示元素的寬度包括內容、內邊距和邊框的寬度。

因此，使用 border-box 可以大大方便我們布局。

2. 高度計算

height = 內容的高度 + 上下padding + 上下border

元素的高度不包括上下的 margin。

總結

使用 box-sizing 屬性，我們可以方便地計算元素的寬度和高度，這是我們在網頁設計和布局中非常關鍵的一步。同時，不同的 box-sizing 值可以帶來不同的盒模型。