代碼解讀
* {box-sizing: border-box;
}解釋：
-
*?- 這是CSS的通用選擇器，表示匹配文檔中的所有元素 -
box-sizing: border-box;?- 設置元素的盒模型計算方式為border-box
盒模型說明：
-
默認情況下，CSS使用
content-box盒模型，元素的寬度(width)只包含內容區域 -
當設置為
border-box時，元素的寬度(width)包含內容、內邊距(padding)和邊框(border)
實際效果例子：
<div style="width: 100px; padding: 10px; border: 5px solid black;">-
在
content-box下：總寬度 = 100px (內容) + 20px (左右padding) + 10px (左右border) = 130px -
在
border-box下：總寬度就是100px，內容區域會自動調整為70px (100 - 20 - 10)
為什么這樣寫？
這種寫法是一種常見的CSS重置(reset)技術，目的是：
-
使元素尺寸計算更直觀
-
簡化布局工作，特別是響應式設計
-
保持不同瀏覽器下的一致表現
)
