原生广告应使用div而非iframe以保持阅读流连贯，采用语义化标签如，配合sticky定位、响应式宽度及样式继承实现自然融合。
广告容器必须用 div，别碰 iframe 除非接入联盟
原生广告的核心是“不打断阅读流”，iframe 天然隔离样式和脚本，会导致字体、行高、颜色全部脱节，用户一眼看出这是“塞进来的”。真实项目里，只要广告内容可控（比如你自己的推广图/文案），一律用 div 包裹，直接写在 HTML 文档流中。
常见错误：把广告联盟给的 iframe 代码硬塞进文章段落中间，结果广告上下边距崩掉、文字基线错位、移动端点击区域变小。这不是排版问题，是结构污染。
- 广告区块应作为语义化内容存在，比如用
<aside class="ad-unit"></aside>而非<div id="ad-728x90"> <li>如果必须用 <code>iframe（如 AdSense），务必加loading="lazy"和referrerpolicy="no-referrer-when-downgrade"，否则会拖慢首屏渲染 -
iframe的width和height必须设为具体数值或使用aspect-ratio，不能依赖内部文档自撑 - 父容器必须有明确高度（不能是
min-height或height: auto），否则 sticky 不触发 - 设置
top: 1rem这类值，而不是top: 0，避免吸附到视口顶边遮挡导航栏 - 配合
margin-block: 1.5rem控制与上下段落的呼吸感，比用padding更符合语义 - 注意 Safari 旧版本对
sticky的兼容性，若需支持 iOS 13 以下，降级为 JS 监听scroll+ 切换class - 用
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 容器中拉伸失真 - 广告容器不写任何
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)是上限，再深就变成弹窗式干扰
position: sticky 是最安全的“贴文”方案
想让广告出现在长文中间某段之后，并随滚动固定？别急着上 position: fixed——它会脱离文档流，导致下方内容突然上跳，尤其在 iOS Safari 中触发重排异常。而 position: sticky 是原生支持的“粘性定位”，只在到达临界点时生效，行为完全符合自然阅读预期。
实操要点：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
图文混排时，广告宽度必须跟随文本容器
很多团队把广告写成 width: 728px，结果在窄屏设备上溢出、在响应式卡片里被裁切。原生广告不是独立模块，它是段落的一部分——它的最大宽度应该等于当前段落的 max-inline-size（即 CSS 中的 max-width）。
推荐写法：
字体、行高、颜色必须继承正文，禁用独立样式栈
原生广告失效最常见的原因，是用了独立字体族、行高倍数、甚至 color: #007bff 这种硬编码色值。用户不会觉得“这个广告很醒目”，只会感到“这段文字突然变怪了”。
真正自然的做法是零配置继承：
最难的不是写对代码，而是忍住不加“个性化样式”。原生广告的隐蔽性，恰恰来自它放弃表现力——所有视觉决策都让渡给正文排版系统。一旦开始定义专属字体、尺寸、动效，它就不再是原生，而是一个需要单独维护的 UI 组件。
