全局样式必须写在内的中，html规范不承认内为有效样式上下文；box-sizing: border-box应限定作用域避免破坏第三方组件；基础重置需覆盖所有用户代理样式；contenteditable和iframe需显式绑定样式作用域。
全局样式必须写在 <style></style> 中
不是“可以”，是规范强制要求。浏览器只在 内解析 <style></style> 为有效样式规则；若误塞进 （哪怕开头），部分规则会失效：比如 body { margin: 0; } 不生效、自定义类名不匹配、@media 查询被忽略——这不是兼容性问题，是 HTML 规范本身不承认 body 内的 <style></style> 为样式上下文。
常见错误现象：
-
box-sizing: border-box在里写了但子元素没反应 - 第三方 SDK 注入的按钮颜色死活调不动，其实是因为它的
<style></style>在末尾，而你的在开头，压根没参与层叠
实操建议：
- 所有模板初始化 CSS 都统一放在
底部，紧挨着<link rel="stylesheet">后面 - 动态插入时用
document.head.appendChild(styleEl)，别 append 到document.body - 多个
<style></style>共存时，顺序即优先级：后写的同选择器规则会覆盖前面的
* { box-sizing: border-box; } 看似稳妥，实则高危
它确实能统一盒模型，但会无差别重置所有元素，包括你没意识到已被 UI 库（如 Ant Design、Element Plus）精细控制过的组件内部结构。一旦触发，常见表现是表单控件高度塌陷、卡片 padding 错位、折叠面板展开后内容溢出。
更安全的初始化写法是限定作用域：
- 只重置你真正要管的容器：
.template-root * { box-sizing: border-box; } - 或分层处理：
html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; }—— 这样既继承 html 的设定，又避免直接暴力打穿第三方组件 - 若项目已用 rem 布局，务必同步检查：
html { font-size: 16px; }是否存在，否则body { font-size: 14px; }会导致所有 rem 计算偏移
HTML 模板中重置默认边距，别只清 body
body { margin: 0; } 只解决最表层，但 <h1></h1>、<p></p>、<ul></ul>、<pre class="brush:php;toolbar:false;"></pre> 等自带用户代理样式（user agent stylesheet）的元素仍会各自留白，导致视觉断层。
推荐模板级基础重置组合：
*, ::before, ::after { margin: 0; padding: 0; border: 0; }ul, ol { list-style: none; }img { display: block; max-width: 100%; height: auto; }-
input, button, select, textarea { font: inherit; }—— 防止表单控件字体脱节 - 慎用
all: unset：它会清掉font-family、color等关键继承属性，补全成本远高于收益
可视化编辑器或 iframe 场景下，全局样式容易“失联”
contenteditable 区域和 iframe 是独立渲染上下文，外部 CSS 默认不穿透。典型现象：编辑器里标题样式正常，用户回车新建段落，新 <p></p> 却恢复浏览器默认字号和行高。
解决路径很窄，必须显式绑定作用域：
- 给编辑容器加 class，例如
<div class="editor-root" contenteditable> <li>CSS 中用后代选择器约束：<code>.editor-root * { line-height: 1.6; margin-block: 0.8em; } - iframe 模式下，不能靠父页面
<style></style>覆盖，必须在 iframe 的srcdoc或其内部中重复引入同一份 CSS，或通过document.write()注入（注意 CSP 限制） - 避免在模板中对
直接写style="..."，它无法继承到 iframe 或 contenteditable 子树
真正麻烦的点不在写法，而在“作用域隔离”这个事实本身——你写的全局样式，从来就不是字面意义的“全局”。它是否生效，取决于选择器能否抵达目标节点、是否被更高权重要求覆盖、以及是否处在同一个 Shadow DOM 或 iframe 边界内。
