代码解读
* {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)技术，目的是：
-
使元素尺寸计算更直观
-
简化布局工作，特别是响应式设计
-
保持不同浏览器下的一致表现
)
