width: 100% 不是万能解，仅在父容器有明确宽度时生效；常见失效原因包括父级未撑开、缺少 viewport 声明、内联元素默认无视 width、table 布局限制、contenteditable 溢出及上下文约束缺失。
width: 100% 不是万能解，它只在父容器有明确宽度时才真正生效；多数“没反应”问题，根源都在父级没撑开或缺少 viewport 声明。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
为什么 width: 100% 经常不生效
百分比宽度是相对于父元素计算的，而 html 和 body 默认不传递视口宽度——body 有默认 margin，且未设 width，导致子元素的 100% 实际算出来可能只有几百像素。
- 必须重置：
html, body { margin: 0; padding: 0; width: 100%; } - 移动端必加：
<meta name="viewport" content="width=device-width, initial-scale=1.0">，否则 iOS Safari 按 980px 渲染，100%就是按这个错值算 -
display类型影响：span、a等内联元素默认无视width，得先加display: inline-block或block
table 元素怎么真正自适应宽度
直接给 <td> 写 <code>width: 20% 大概率无效——table-layout: auto 下浏览器按内容撑开，fixed 模式下又只读第一行或 <col> 的声明。
- 强制用
table-layout: fixed，且<table> 必须有明确宽度（如 <code>width: 100%） - 列宽定义优先写在
<col>上：<col width="150"> <col width="30%">，别依赖<th> 或 <code><td> <li>避免混用 <code>min-width/max-width，它们在fixed模式下常被跳过 - 小屏溢出？外层套
div并加overflow-x: auto - 禁用无限扩张：
max-width: 100%+word-break: break-word（或break-all） - 更稳妥方案：
width: fit-content+max-width: 100%，让宽度随内容增长但不超过父容器 - 确保父容器不是
inline或flex中未设flex-shrink: 0的项，否则会进一步干扰 - 响应式容器推荐写法：
width: 100%; max-width: 1200px; margin: 0 auto; -
vw适合做 banner 高度、字体缩放等视觉适配，慎用于布局宽度（尤其50vw在窄屏下可能小于内容最小宽度） -
min-width很关键：比如表单区域设min-width: 320px，防止折叠屏竖向时文字挤成一团
contenteditable 元素宽度失控怎么办
这类元素输入长串无空格文本（如 base64、URL）时，width: 100% 会失效，容器被强行撑宽，甚至拖出横向滚动条。
立即学习“前端免费学习笔记（深入）”；
固定宽度 vs 自适应：什么时候该用 vw 或 max-width
vw 单位看似灵活，但 100vw = 视口全宽（含滚动条宽度），实际布局中容易偏移；纯 width: 100% 又会在大屏上拉得太开。真正可控的是组合约束。
最易被忽略的一点：所有“自适应”都依赖上下文——父容器是否撑开、是否清除浮动、是否被 overflow: hidden 裁剪、是否在 flex/grid 容器里被隐式压缩。不查父级，光调子元素，大概率白忙。
