CSS reset 不改变盒模型，默认 content-box 导致尺寸计算偏差；需显式设置 ::before,::after { box-sizing: border-box }；reset 后须重定义语义间距，推荐 normalize.css 替代激进 reset。
css reset 本身不改盒模型，但会暴露 box-sizing 默认值问题
很多人以为 * { margin: 0; padding: 0 } 这类 reset 一加上，布局就“干净”了——其实它只清掉了外边距和内边距，完全没碰 box-sizing。浏览器原生默认仍是 content-box，也就是说：width: 200px; padding: 10px; border: 1px 的元素，实际占宽是 222px。reset 后你反而更容易踩坑，因为“视觉预期”和“真实尺寸”差距被放大了。
- reset 清掉
<p></p>的margin: 1em 0，但没改它的box-sizing，所以后续加 padding 时仍按 content-box 算 - 你手动写
width: 100%的卡片，又加padding: 16px，结果溢出父容器——这不是 bug，是 content-box 的标准行为 - 伪元素（
::before/::after）也继承content-box，漏掉它们会导致装饰性边框/阴影计算错误
必须显式设置 *::before, *::after { box-sizing: border-box }
只写 * { box-sizing: border-box } 是不够的。CSS 规范中，伪元素不被 * 选择器匹配，它们仍走默认的 content-box。一旦你用伪元素画三角、做加载动画或模拟边框，尺寸就会“多出来”几像素，尤其在 flex/grid 容器里容易触发换行或错位。
*,
*::before,
*::after {
box-sizing: border-box;
}- 这条规则必须放在所有 reset 样式之后（否则被覆盖），且建议紧贴
<style></style>开头或:root下 - 不要用
inherit替代通配符（如* { box-sizing: inherit }），IE8– 不支持，且 html 根节点没设border-box时会失效 - 像 Bootstrap 5 这类库只在组件内部设
border-box，不影响全局，不能替代这条规则
reset 清 margin/padding 后，语义间距必须重定义
清除默认边距不是终点，而是起点。比如 <h1></h1> 没了 margin-bottom，<p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板">CSS婚礼策划服务机构宣传网站模板</a>
<p>CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div> 没了上下空隙，整段文字就“糊”在一起。这时候不能靠“恢复默认值”，而要按设计系统主动声明：
h1, h2, h3, h4, h5, h6 {
margin: 0 0 1rem 0;
}
p {
margin: 0 0 1rem 0;
}
ul, ol {
margin: 0 0 1rem 0;
padding-left: 1.5rem;
}- 用
rem而非固定像素，方便缩放与主题切换 - 避免混合使用 margin 和 padding 控制同级间距（比如
h2 + p场景），统一用 margin 更可控 - 行内元素（
<em></em>,<strong></strong>）在 reset 后更“敏感”，line-height和vertical-align影响更直接，需单独测试
别盲目用 * { margin: 0; padding: 0 }，优先考虑 normalize.css
如果你发现 reset 后要拼命补 p、blockquote、table 的样式，说明 reset 太激进。normalize.css 不清空，而是修正：保留标题层级、表单可访问性、列表缩进逻辑，只对齐跨浏览器差异。它不会让你从零写排版，而是帮你少踩 80% 的兼容性坑。
立即学习“前端免费学习笔记（深入）”；
- 对比数据：Safari 的
<h1></h1>margin 是21.5px，Firefox 是21.4px，Chrome 是21.3px—— normalize 把它们全拉平到21.333px（即 1.333em） - 它不碰
box-sizing，所以你仍需自己加那行*::before, *::after声明 - 对第三方 UI 库（如 Ant Design）更友好，不会意外重置其内部组件的 spacing 规则
真正卡住人的，从来不是“要不要 reset”，而是 reset 后忘了盒模型没变、忘了伪元素没管、忘了语义间距得重来——这三件事，比写十行 flex 布局还容易漏。
