用 outline 一行代码快速暴露溢出错位元素，不占空间、不触发重排；需先修复非法 HTML 结构，再确认 Flex/Grid 上下文是否生效。
直接用 outline 一行代码就能暴露所有溢出和错位元素，比反复切样式面板快得多。
用 * { outline: 1px solid red !important } 快速显形所有元素
这不是“加边框”，而是用 outline 绕开盒模型干扰——它不占空间、不触发重排、不影响 margin 折叠。执行后，所有元素立刻带红色轮廓，横向滚动条的元凶、撑破容器的 div、漂移的 img 全部无处藏身。
- 在控制台粘贴：
document.head.innerHTML += '<style>*{outline:1px solid red!important;background:rgba(255,0,0,0.05)!important;}</style>' - 退出时删掉这行样式：
document.querySelector('style').remove() - 别用
border替代：它会改变尺寸、可能掩盖真实溢出点 - 注意：
outline会覆盖部分::before/::after的背景，但调试阶段够用
只标记特定类型元素，避免视觉过载
页面元素太多时，全局 outline 反而难定位。按需筛选更高效：
- 查布局结构？用
div { outline: 2px solid #0088ff !important } - 怀疑图片拉宽？
img { outline: 2px solid #4CAF50 !important; max-width: 100% !important }临时约束宽度 - 找浮动残留？
[float] { outline: 3px dashed orange !important } - 父容器高度塌陷？
:not(body):not(html):has(> [float]) { outline: 3px solid purple !important }（Chrome 120+ 支持）
识别被浏览器悄悄修正的 HTML 结构
很多布局错位根本不是 CSS 问题，是 HTML 本身非法嵌套导致 DOM 被重写。比如 <p><div>xxx</div></p>，浏览器会直接闭合 <p>，让 <div> 跑到外面——你写的父容器根本没包住子元素。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 在 DevTools 中右键父容器 → “Edit as HTML”，删一个字符再回车：如果子结构整体跳出去，说明原始结构已被修正
- 运行
document.body.innerHTML，和本地源码逐行比对，多出的</p>、消失的<section>都是线索 - W3C Validator 会直接报错：
Element div not allowed as child of element p—— 这类必须先修 HTML，再调 CSS - 自闭合标签写成
<img src="x"></img>？会被当成两个标签，后续所有嵌套右移一级
检查 Flex/Grid 上下文是否真正生效
子元素写了 flex: 1 却没反应？大概率是父容器压根没开启 Flex 上下文。Flex 和 Grid 的属性只在“有上下文”的容器里才起作用，否则直接被忽略。
- 选中疑似父容器，在 DevTools 的 Computed 标签页确认
display是否真为flex或grid - 别只给子元素设
flex，忘了父容器display: flex - Grid 布局中，
grid-template-areas看似直观，但新增区域就得全行重写；更稳妥的是用grid-template-columns+grid-column - IE11 不支持 Grid（哪怕加前缀），要兼容就得 fallback 到 Flex 或 float
真正卡住的往往不是某个属性写错了，而是浏览器已经按规则默默改写了你的 DOM，或者你正在给没有上下文的元素徒劳地加 flex 属性。动手前先让所有元素显形，再看一眼 document.body.innerHTML，比调十次 CSS 更接近真相。
