CSS是前端開發中最為重要的技術之一，其中涉及到的寬高計算也是相當關鍵的一環。

box-sizing: content-box;
width: 100px;
padding: 10px;
border: 2px solid black;
height: 50px;

在CSS寬高計算中，有一個非常重要的屬性就是box-sizing。這個屬性的默認值是content-box，表示元素的寬和高不包括內邊距和邊框，只包括內容區域。

在上面的代碼中，元素的寬度為100px，但是加上10px的內邊距和4px的邊框后，元素實際寬度變為了124px。這是因為這個元素的box-sizing屬性值為content-box。

box-sizing: border-box;
width: 100px;
padding: 10px;
border: 2px solid black;
height: 50px;

如果我們將box-sizing屬性的值改為border-box，表示元素的寬和高包括內邊距和邊框，那么這個元素的實際寬度就會變成100px。這是因為寬度計算的時候包括了內邊距和邊框。

我們還可以使用CSS3的calc()函數對元素的寬和高進行計算。這個函數可以對長度單位進行加減乘除運算。例如：

width: calc(100% - 20px);

這個代碼表示元素的寬度為父元素寬度減去20px。

CSS寬高計算非常重要，開發人員需要熟練地掌握相關屬性和函數，才能更加高效地完成頁面布局工作。