重置css不能用*{margin:0;padding:0}，因其破坏表单控件、语义元素等原生样式；应精准重置box-sizing、margin/padding、font-size/line-height、list-style等核心属性，并确保viewport meta标签正确、css编码为utf-8无bom、appearance与outline等非盒模型属性单独处理。
引入 CSS 后布局错乱，大概率不是你的样式写错了，而是浏览器默认样式（user agent stylesheet）和你引入的规则发生了隐式叠加或覆盖冲突。重置和基础样式必须前置、精准、可控，否则越调越乱。
为什么重置不能用 * { margin: 0; padding: 0; }
它会抹掉表单控件（input、button、select）的原生边距和内边距，导致点击区域变小、文字贴边、可访问性下降；还会破坏 pre、blockquote 等语义元素的默认留白，让内容失去呼吸感。
真正要重置的是影响布局锚点的几个核心属性：
-
box-sizing：统一设为border-box，含::before和::after伪元素 -
margin/padding：只对body、h1–h6、p、ul、ol、dl、pre、form、fieldset显式归零 -
font-size/line-height：在html或body设基准值（如16px/1.5），避免继承链断裂 -
list-style：对ul、ol显式设为none或保留，不依赖默认
Bulma / Bootstrap 等框架布局失效，先查 <meta name="viewport">
这类移动优先框架的栅格、间距、断点全靠 @media (max-width: ...) 触发。没有 <meta name="viewport" content="width=device-width, initial-scale=1.0">，iOS Safari 和 Android WebView 就按 980px 宽度渲染，所有响应式规则形同虚设。
检查时注意三点：
- 标签必须出现在
最顶部，前面不能有 JS、注释、模板变量（Next.js/Nuxt 用户要看最终 HTML 源码） - 只能出现一次，CMS 或主题常偷偷注入一个，你再手写一个，后写的会覆盖前写的
- 禁用
width=320、user-scalable=no等硬编码值；initial-scale=1.0不可省，否则 iOS 会强制缩放
Firefox 排版突然崩溃，重点查 CSS 编码与语法错误
Firefox 对 UTF-8 with BOM 的 CSS 文件解析极不稳定，BOM 会在 @import 或 @media 前插入不可见字符，导致后续所有规则静默失效。
定位语法错误更直接：
- 打开开发者工具 → Elements → 任选错乱元素 → 右侧 Styles 面板，从上往下逐条取消勾选规则，一旦页面恢复，就锁定那条——常见是
@keyframes没闭合、grid-template-areas引号不配对、var(--x)引用不存在变量 - 在 Console 执行
document.querySelectorAll('link[rel="stylesheet"], style').forEach(el => el.remove())，若此时退化为清晰 HTML 结构，说明问题确在 CSS 层 - 用 VS Code 打开 CSS 文件 → 编码菜单 → “转为 UTF-8 无 BOM 格式” → 关闭“自动添加 BOM”选项 → 保存并重新部署
Chrome 渲染正常但 Firefox 错位，警惕 appearance 和 outline
这两个属性不参与常规重置，但直接影响表单控件行为：appearance: none 移除原生样式后若没补 border、background，控件可能塌陷或不可见；outline 被设为 0 或 none 后，键盘焦点状态丢失，用户无法判断当前操作位置。
它们必须在基础样式里单独处理，且不能只写在 scoped style 里——全局组件仍走浏览器默认，会造成局部重置、全局未重置的割裂。
真正容易被忽略的是：重置只是清场，基础样式才是重建锚点；而 appearance 和 outline 这类非盒模型属性，恰恰是清场后最容易漏补的“隐形地基”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
