html在线运行编辑器实测，我把三段样式调试搬了上去

三段样式调试我固定放在浏览器里的html在线运行编辑器里做：flex 居中、grid 栅格、CSS 变量，各跑一遍看实际渲染，再决定要不要挪回本地。这条做法有边界，要读构建日志、要在源码里打断点、要连本地接口的时候，编辑器接不住，得回 VS Code 配 dev server。

这么分不是图快。三段代码都是纯样式，不碰文件也不碰网络，放哪儿跑结果都一样；真正不一样的是环境给出的那几个基准值。

在线编辑器与本地环境的差别，按三条维度比

前提最硬。HTML 能独立打开、样式不外链、脚本不发请求，编辑器就成立，粘贴即出图。代价是它只给一块画布，文件系统、构建产物、Source Map 都不在视野里。

本地反过来，前提是 Node 装好、依赖装完、端口没被占。代价是等启动，改一行 CSS 也要过一遍热更新。

适用场景按改动粒度分。改一列宽、试一个 gap、确认一条 var() 有没有生效，编辑器几秒钟出结果；改动要提交、要过 lint、要跟团队格式对齐，本地更稳，因为那些检查在编辑器里根本不存在。

这几块怎么拼，边界就落在哪。左边输入区是纯文本，右边预览是一条 iframe，控制台挂在下方，沙箱属性写在 iframe 标签上。三段样式能跑，靠的是html在线运行编辑器里 iframe 这条链路；跑不出来，问题多半也在这条链路上。

三段样式代码的运行结果

三段样式丢进html在线运行编辑器，写在一个文件里，省掉来回切文件。最终留下的那份长这样。

:root {
  --card-gap: 16px;
  --card-radius: 12px;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.grid {
  display: grid;
  gap: var(--card-gap);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.card {
  border-radius: 8px;
  border-radius: var(--card-radius);
}

第一段 flex 居中，最初写的是 height: 100%。预览里盒子贴着顶，一点没居中。F12 选中 body，Computed 里 height 只有卡片那么高——html 的高度是 auto，body 的 100% 跟着退化成 auto，只包住内容，撑不满视口。换成 min-height: 100vh 才立起来。

vh 的基准在编辑器里是 iframe 的高度。把预览区拖高，居中的盒子跟着下移；本地整屏看不出这个差别，窗口高度基本不动。靠 vh 撑满的首屏样式，不适合在窄预览里判断对错。

第二段 grid 栅格。写死 repeat(3, 1fr) 时，预览区 486px 宽，扣掉两个 16px 的 gap，每列只剩 151px，卡片标题折成三行。改成 minmax(220px, 1fr) 配 auto-fit，同样宽度自动降成两列，宽屏再回到三列，列数变了代码没变。

媒体查询的断点同理。比的是 iframe 宽度，不是屏幕宽度；27 寸显示器上，预览区照样能触发 max-width: 768px 那一段。

第三段 CSS 变量。粘回本地时漏了 --card-radius 一行，.card 的圆角没有回到上面那条 8px，而是 0。Elements 里两条 border-radius 都没被划掉，Computed 显示 0px：自定义属性的值无效，属于计算值阶段才失效，整条声明按 unset 处理，不会退回前一条。

要留住 8px，回退值得写在 var() 里面：border-radius: var(--card-radius, 8px)。

iframe 的 sandbox 属性决定哪一半能跑

样式和脚本在预览里不是一回事。沙箱只给样式不给脚本，页面照样渲染，控制台多一行红字。

<iframe
  srcdoc="<!doctype html><style>…</style><div class='card'>卡片</div>"
  sandbox="allow-scripts"
  title="样式预览">
</iframe>

编辑器不是把页面挂到某个 URL 上，是把粘贴进来的 HTML 塞进 iframe 的 srcdoc，所以下面两条报错里的文档地址都是 about:srcdoc。

漏掉 allow-scripts 时，报错原文是 Blocked script execution in 'about:srcdoc' because the document's frame is sandboxed and the 'allow-scripts' permission is not set. 补上之后脚本跑了，localStorage 又抛 Uncaught DOMException: Failed to read the 'localStorage' property from 'Window': The document is sandboxed and lacks the 'allow-same-origin' permission.

两个都加，沙箱基本等于没开：同源的被嵌文档可以自己把 sandbox 属性摘掉再往外跳。预览适合看样式，不适合验存储和 cookie 相关的行为。

编辑器拿到 HTML 会先解析，再塞进 iframe，这一步决定了 document 的来源，也决定了上面两种报错落在哪儿。绕过存储限制的办法是把写入请求用 postMessage 发回父页面，由父页面判断写不写，代价是多一层消息协议。

三段活分别放哪，我给的分工

单条属性试值放 devtools 的 Styles 面板。勾掉、改数、看渲染，改完把值抄回文件；前提是页面已经开着，代价是刷新就没了。

整块样式验证放html在线运行编辑器。前提是这段代码能独立跑，代价是预览区宽度不等于真实窗口，vh 和媒体查询都按 iframe 算。

提交前的回归放本地。前提是依赖装好，代价是启动和构建那几十秒，换回来的是 lint、格式化和真实窗口宽度。

判断依据一句：这段代码碰不碰文件系统和网络。不碰，编辑器；碰，本地。

分工不是固定的。同一个组件，上午在编辑器里调间距，下午回本地跑回归，两边都要开着。

三处边界各自要付的代价

这套做法只对纯样式成立，说它「固定放编辑器里」就过头了。错在把出结果快当成测得准——预览区宽度、vh 基准、变量作用域，三样都是环境给的，代码本身没有毛病。

重来会先量预览区。把分隔条拖到 1280 左右再动样式，窄的时候只用来验证降列；多花十几秒，换掉的是回本地才发现断点不对的那次返工。

第二件事是把带变量的那段落两份：编辑器里那份写全回退值，本地那份走构建。两份不同步是常态，所以变量名只在一处定义，其余地方只引用。

代价是多维护一份副本，换的是窄预览里也能看出圆角丢没丢。这三段代码现在还在html在线运行编辑器里跑，每次打开先把分隔条拖到位，再看结果。