详细解读 box-sizing: border-box；

代码解读

* {
    box-sizing: border-box;
}

解释：

1. * - 这是CSS的通用选择器，表示匹配文档中的所有元素

2. 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)技术，目的是：

1. 使元素尺寸计算更直观

2. 简化布局工作，特别是响应式设计

3. 保持不同浏览器下的一致表现