原生广告应使用div而非iframe以保持阅读流连贯，采用语义化标签如，配合sticky定位、响应式宽度及样式继承实现自然融合。

广告容器必须用 div，别碰 iframe 除非接入联盟

原生广告的核心是“不打断阅读流”，iframe 天然隔离样式和脚本，会导致字体、行高、颜色全部脱节，用户一眼看出这是“塞进来的”。真实项目里，只要广告内容可控（比如你自己的推广图/文案），一律用 div 包裹，直接写在 HTML 文档流中。

常见错误：把广告联盟给的 iframe 代码硬塞进文章段落中间，结果广告上下边距崩掉、文字基线错位、移动端点击区域变小。这不是排版问题，是结构污染。

• 广告区块应作为语义化内容存在，比如用
  而非
• 如果必须用 iframe（如 AdSense），务必加 loading="lazy" 和 referrerpolicy="no-referrer-when-downgrade"，否则会拖慢首屏渲染
• iframe 的 width 和 height 必须设为具体数值或使用 aspect-ratio，不能依赖内部文档自撑

position: sticky 是最安全的“贴文”方案

想让广告出现在长文中间某段之后，并随滚动固定？别急着上 position: fixed——它会脱离文档流，导致下方内容突然上跳，尤其在 iOS Safari 中触发重排异常。而 position: sticky 是原生支持的“粘性定位”，只在到达临界点时生效，行为完全符合自然阅读预期。

实操要点：

• 父容器必须有明确高度（不能是 min-height 或 height: auto），否则 sticky 不触发
• 设置 top: 1rem 这类值，而不是 top: 0，避免吸附到视口顶边遮挡导航栏
• 配合 margin-block: 1.5rem 控制与上下段落的呼吸感，比用 padding 更符合语义
• 注意 Safari 旧版本对 sticky 的兼容性，若需支持 iOS 13 以下，降级为 JS 监听 scroll + 切换 class

图文混排时，广告宽度必须跟随文本容器

很多团队把广告写成 width: 728px，结果在窄屏设备上溢出、在响应式卡片里被裁切。原生广告不是独立模块，它是段落的一部分——它的最大宽度应该等于当前段落的 max-inline-size（即 CSS 中的 max-width）。


DeepBI DHTML 页面生成器
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
下载

推荐写法：

• 用 width: 100% + max-width: 100% 锁死不溢出
• 图片广告用 img { width: 100%; height: auto; }，禁止设固定 height
• 文字类广告用 font-size: clamp(0.875rem, 4vw, 1rem)，确保小屏可读、大屏不撑爆
• 如果广告含按钮，button 必须设 width: fit-content，再用 margin-inline: auto 居中，避免在 flex 容器中拉伸失真

字体、行高、颜色必须继承正文，禁用独立样式栈

原生广告失效最常见的原因，是用了独立字体族、行高倍数、甚至 color: #007bff 这种硬编码色值。用户不会觉得“这个广告很醒目”，只会感到“这段文字突然变怪了”。

真正自然的做法是零配置继承：

• 广告容器不写任何 font-family、line-height、color，让它完全继承父级 p 或 article 的计算值
• 如果必须强调标题，用 font-weight: 600 + text-transform: none，而非换字体或改颜色
• 背景色若需弱提示，用 background-color: rgba(0, 0, 0, 0.03)，透明度控制在 0.02–0.05 之间，超过就显眼
• 慎用阴影：box-shadow: 0 1px 2px rgba(0,0,0,0.05) 是上限，再深就变成弹窗式干扰

最难的不是写对代码，而是忍住不加“个性化样式”。原生广告的隐蔽性，恰恰来自它放弃表现力——所有视觉决策都让渡给正文排版系统。一旦开始定义专属字体、尺寸、动效，它就不再是原生，而是一个需要单独维护的 UI 组件。