CSS 实时预览

CSS 实时预览：iframe 尺寸与默认样式带来的判断偏差

两个输入框的分工

这个工具把结构和样式分开：HTML 结构框决定有哪些元素，CSS 框决定它们长什么样，右侧 iframe 实时渲染。分开的好处是改样式时不用重新组织结构，反复调选择器特别方便。

适合的工作：

• 试验选择器写法与优先级（specificity）——同一元素被多条规则命中时，实际生效的是哪一条。
• 调试 Flexbox 与 Grid 的对齐、间距、换行行为。
• 验证伪类与伪元素（:hover、::before、:nth-child）的效果。
• 试 CSS 变量、calc()、clamp() 这类计算与响应式函数。

陷阱一：单位以 iframe 尺寸为基准

这是最容易得出错误结论的地方。预览是一个 iframe，它的尺寸由工具页面布局决定，不等于你的浏览器窗口。所以：

所以不要用这个预览验证响应式布局。要测媒体查询，用浏览器开发者工具的设备模拟（Device Toolbar），那里可以精确指定视口宽度。

陷阱二：默认样式与继承

• iframe 有自己的默认 UA 样式。例如 body 默认有 8px 左右的 margin。所以你的布局"整体偏了一点"往往不是你的 CSS 错了，而是没做 reset。真实项目里通常先引入归一化样式。
• 字体不同。预览环境的默认字体与你的生产环境可能不同，字体的度量差异会影响行高与换行位置——同一段文字在不同默认字体下换行点会差几个字。
• 继承链是干净的。预览里没有外部样式表的干扰，所以某些依赖全局样式的写法（比如依赖 * { box-sizing: border-box }）在预览里表现不同。这类全局设定需要在 CSS 框里自己写上。

陷阱三：外部资源

和你预想的一样：相对路径的资源（图片、字体文件）无法加载，因为没有基地址。用完整 URL 或 data URI。想引入 web font，直接用 CDN 的 @import 或完整链接——但要意识到字体加载是异步的，预览里刚渲染时的排版可能与最终不同（font swap），这可能让你误判行高问题。

观察优先级的一个实用做法

调试样式冲突时，最有价值的操作是：在预览的 iframe 上右键选择"检查"，在开发者工具的 Styles 面板里看哪些规则被划掉了。被划掉的规则就是被更高优先级或更靠后的规则覆盖的部分，这是判断样式冲突最直接的方式——比反复猜选择器写法快得多。

另外记住优先级的基本排序：!important > 内联样式 > ID 选择器 > 类/属性/伪类 > 元素/伪元素。同一层级内，后出现的规则胜出。这些规则的具体权重计算对排查很有用。

工具怎么用

在左栏写 CSS，需要时在下面的 HTML 结构框里写要作用的元素（结构可以随时编辑，便于试不同的标签组合），点渲染，右侧立即出效果。全部在浏览器本地完成，不加载外部服务。

得出的结论搬到正式项目时，记得在实际的 CSS 环境里再验证一次——预览环境干净、尺寸受限，两者在单位与继承上会有差异。