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="/ai/1154" title="Motiff"><img
src="https://img.php.cn/upload/ai_manual/000/000/000/175680126049574.png" alt="Motiff" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/1154" title="Motiff">Motiff</a>
<p>Motiff是由猿辅导旗下的一款界面设计工具，定位为“AI时代设计工具”</p>
</div>
<a href="/ai/1154" title="Motiff" 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 布局还容易漏。
