CSS清楚默认样式

css 复制代码

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

这段 CSS 代码是一个常见的全局样式重置代码块，它会对网页中的所有元素（通过通配符 * 选择器）应用相同的样式规则，下面分别解释每一条规则的作用。

`margin: 0;`

在 HTML 中，许多元素（像 body、h1 - h6、p 等）都有浏览器默认的外边距。外边距指的是元素与其他元素之间的距离，它会在元素的外部增加额外的空间。使用 margin: 0; 可以把所有元素的外边距都设为 0，这样就能消除不同浏览器之间默认外边距的差异，保证在所有浏览器中页面布局的起始状态一致。

例如，body 元素在多数浏览器里默认会有一定的外边距，运用 margin: 0; 后，页面内容就能紧贴浏览器窗口边缘显示。

`padding: 0;`

与外边距类似，部分元素也存在浏览器默认的内边距。内边距是元素内容和边框之间的距离，它会在元素内部增加额外的空间。设置 padding: 0; 可以将所有元素的内边距都设为 0，同样是为了消除不同浏览器默认内边距的差异，确保页面布局的一致性。

比如，ul 和 ol 列表元素通常会有默认的内边距，使用 padding: 0; 后，列表项就能直接从容器边缘开始排列。

`box-sizing: border-box;`

box-sizing 属性用于控制元素盒模型的尺寸计算方式。它有两个常用的值：content-box（默认值）和 border-box。

当 box-sizing 为 content-box 时，元素的宽度和高度仅包含内容区的大小，内边距和边框会在内容区的基础上向外扩展，从而增加元素的整体尺寸。
当 box-sizing 设置为 border-box 时，元素的宽度和高度包含了内容区、内边距和边框。也就是说，设置的 width 和 height 属性值是元素包含内边距和边框在内的总尺寸。

将 box-sizing 设置为 border-box 可以简化布局计算，让元素的尺寸更易于控制，避免因内边距和边框影响元素的实际尺寸而导致布局混乱。

综合作用

这段代码的综合作用是重置所有元素的默认样式，消除不同浏览器之间的默认样式差异，为后续的页面布局提供一个统一的基础。通过设置 margin: 0; 和 padding: 0; 去除默认的外边距和内边距，再使用 box-sizing: border-box; 统一元素的盒模型计算方式，开发者就能更精确地控制页面中各个元素的大小和位置。