网页广告必须显式声明width和height属性，否则会导致CLS、加载抖动等问题；响应式广告需配合sizes/srcset但基础尺寸不可省；fixed/absolute广告须设容器宽高；慎用rem/em；JS动态插入需预设尺寸；第三方广告需检查包裹容器尺寸。
网页广告的宽高不能靠“估”，尤其在横幅、插页、富媒体等场景下，写死像素值或留空会直接导致布局偏移（CLS）、加载抖动、响应失败。关键不是“能不能设”，而是“在哪设、怎么设、设多少才稳”。
广告图片/iframe 必须显式声明 width 和 height 属性
浏览器解析 HTML 时，若 <img alt="HTML网页广告高宽怎么设？精确尺寸修改说明" > 或 <iframe></iframe> 没有 width 和 height 属性，会按 0×0 占位；资源加载完成后突然撑开，下方内容被上推——这就是 CLS（Cumulative Layout Shift）的典型来源。
- 正确写法：
<img src="ad.jpg" style="max-width:90%" style="max-width:90%" alt="HTML网页广告高宽怎么设？精确尺寸修改说明" >（注意：是 HTML 属性，不是 CSS） - 不推荐仅用 CSS 控制：
img { width: 728px; height: 90px; }—— CSS 加载可能晚于 HTML 渲染，仍会闪动 - 响应式广告需配合
sizes+srcset，但基础尺寸属性仍不可省
position: fixed 或 position: absolute 广告的尺寸陷阱
浮动广告常写成 position: fixed; top: 10px; right: 10px;，但若没设 width/height，它的尺寸会依赖子内容（比如 iframe 内容未加载完时高度为 0），造成位置漂移或缩成一条线。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 必须显式设定容器宽高：
div#ad-container { width: 300px; height: 250px; } - 若子元素是
<iframe></iframe>，它的width/height属性值应与父容器 CSS 尺寸一致，避免滚动条或裁剪 - 移动端需加
max-width: 100%;防溢出，但不要用width: 100%;替代原始尺寸声明
响应式广告中 rem/em 尺寸慎用
rem 基于 html 字体大小，em 基于父级字体大小——这两者对广告尺寸来说是“不稳定变量”。广告位需要可预测的物理占位，而不是随文字缩放联动。
立即学习“前端免费学习笔记（深入）”；
- 广告容器禁止用
width: 10rem;这类写法，除非你全程控制html { font-size }且永不变更 - 若页面整体用 rem 布局，广告区域建议单独切出，用
px或vw/vh固定基准（如width: 75vw; max-width: 728px;） - 动态插入的 JS 广告（如通过
document.createElement('div')）必须在插入前就设置好style.width和style.height，不能等 onload 后再改
最易被忽略的一点：第三方广告脚本（如 Google AdSense、腾讯优量汇）返回的 <iframe></iframe> 通常自带 width/height，但如果你用 CSS 包裹了一层自定义容器，又没给该容器设 overflow: hidden 或明确尺寸，iframe 内容仍可能撑破布局。检查 DOM 实际渲染后的盒模型，比看代码更可靠。
