布局错乱主因是浏览器默认样式与引入CSS隐式冲突；应前置精准重置box-sizing、关键标签margin/padding、font/line-height基准、list-style及viewport标签，禁用*{margin:0;padding:0}。
引入 CSS 后布局错乱，大概率不是你的样式写错了，而是浏览器默认样式（user agent stylesheet）和你引入的规则发生了隐式叠加或覆盖冲突。重置和基础样式必须前置、精准、可控，否则越调越乱。
为什么 * { margin: 0; padding: 0; } 会破坏表单和语义元素
它会抹掉 input、button、select 的原生边距和内边距，导致点击区域变小、文字贴边、可访问性下降；还会破坏 pre、blockquote 等语义元素的默认留白，让内容失去呼吸感。
- 真正要重置的是影响布局锚点的几个核心属性：
box-sizing、显式标签的margin/padding、font-size/line-height基准值、list-style -
box-sizing: border-box必须包含*::before和*::after，否则伪元素可能撑开容器 - 对
ul、ol显式设list-style: none或保留，不能依赖默认行为
viewport meta 标签缺失或位置错误导致响应式失效
Bulma、Bootstrap、Tailwind 等移动优先框架的栅格、断点、间距全靠 @media (max-width: ...) 触发。没有正确的 <meta name="viewport">，iOS Safari 和 Android WebView 就按 980px 宽度渲染，所有响应式规则形同虚设。
- 标签必须出现在
<head>最顶部，前面不能有 JS、注释、模板变量（Next.js/Nuxt 用户要看最终 HTML 源码） - 只能出现一次，CMS 或主题常偷偷注入一个，你再手写一个，后写的会覆盖前写的
- 内容只保留
width=device-width, initial-scale=1.0；禁用width=320、user-scalable=no等硬编码值
CSS 文件编码含 BOM 导致 Firefox 静默失效
Firefox 对 UTF-8 with BOM 的 CSS 文件解析极不稳定，BOM 会在 @import 或 @media 前插入不可见字符，导致后续所有规则静默失效。
立即学习“前端免费学习笔记（深入）”；
- 用 VS Code 打开 CSS 文件 → 编码菜单 → “转为 UTF-8 无 BOM 格式” → 保存
- 务必关闭编辑器“自动添加 BOM”选项，否则下次保存仍会写入
- 定位语法错误更直接：打开开发者工具 → Elements → 任选错乱元素 → 右侧 Styles 面板，从上往下逐条取消勾选规则，一旦页面恢复，就锁定那条
- 常见问题包括：
@keyframes没闭合、grid-template-areas引号不配对、var(--x)引用不存在变量
重置 CSS 加载顺序错误或作用域失控
重置样式必须是整个样式链的第一环，否则后续规则可能已被默认样式污染。常见错误包括把重置 CSS 放在第三方 UI 库（如 Bootstrap）之后加载，或用 @import 引入却放在主样式文件中间。
- 推荐做法：将重置 + 基础样式合并为一个
base.css，在所有其他样式前通过<link>同步加载 - 若用构建工具（如 Laravel Mix、Vite），确保它在打包入口的最顶部
@import - 避免在 scoped style（如 Vue 单文件组件）里只重置局部，而全局组件仍走浏览器默认 → 布局割裂
- 基础样式要补上被重置“清空”的默认行为：
a补text-decoration: none、img加max-width: 100%、table设border-collapse: collapse、表单控件统一font和vertical-align
最容易被忽略的是 appearance 和 outline：它们不参与重置，但直接影响表单控件的点击反馈和焦点状态，必须在基础样式里单独处理。
