用 flex 或 grid 拼接模块更轻量可控，前提是语义清晰、样式无耦合；iframe 用于自建模块会导致资源重复、通信繁琐、seo 差、滚动断裂；flex 需满足父容器显式设 display: flex、模块为直系子元素、长内容加 min-width/height: 0；grid 宜用 grid-column 线性定位而非 grid-template-areas；间距统一用 gap，模块根元素建议 all: unset 重置隐性样式。
直接用 display: flex 或 display: grid 拼接模块，比 iframe、fetch 注入或 template 更轻量、更可控——前提是模块结构语义清晰、样式无强耦合。
为什么不用 iframe 拼接主页面模块
iframe 适合嵌第三方内容（如地图、支付页），但用于拼接自己写的 header / sidebar / main / footer 会带来明显负担：
- 每个 iframe 独立加载 JS/CSS，重复资源开销大，首屏时间拉长
- 父页面无法直接读写子 iframe 的 DOM，
postMessage通信繁琐且需 origin 校验，调试困难 - SEO 友好性差：搜索引擎通常不索引 iframe 内容，除非 src 是同源 HTML 文件且被显式抓取
- 移动端滚动链路断裂：iOS Safari 中 iframe 内部滚动常卡顿，且无法与外层滚动自然衔接
Flex 布局拼接模块时的三个硬性前提
Flex 不是“设了就灵”，必须满足以下三点，否则模块会错位、撑出横向滚动条或高度塌陷：
- 父容器必须显式设置
display: flex，且不能被float、position: absolute或display: contents干扰上下文 - 所有模块元素（如
<header></header>、<aside></aside>、<main></main>）需是该父容器的**直系子元素**；嵌套一层<div class="wrapper"> 就会断掉 flex 流 <li>含长文本或未约束尺寸的模块（如富文本区块）必须加 <code>min-width: 0和min-height: 0，否则 flex 项默认不收缩，导致布局溢出 - 每行字符串必须完全对齐，一个空格错位就让整个声明失效，浏览器静默忽略，不报错也不渲染
- 动态插入新模块（比如运营弹窗、AB 测试组件）需同步修改所有
grid-area名称和模板字符串，极易漏改 - 响应式切换列数时，
@media里重写整套grid-template-areas会导致 CSS 体积膨胀，且难以复用 -
margin在 flex/grid 里行为复杂：flex item 的margin会参与空间分配计算，grid item 的margin可能被折叠或忽略 -
gap作用于容器，不污染子元素样式，且支持响应式单位（如gap: clamp(0.5rem, 2vw, 1.5rem)） - IE11 不支持
gap，若必须兼容，可用padding+background-clip: padding-box模拟，但代价是模块内容区变窄
Grid 拼接多区域时如何避免 grid-template-areas 的坑
grid-template-areas 看起来直观，但实际维护中容易失控：
更稳妥的做法是用线性定义：grid-template-columns: 240px 1fr 320px + grid-column: 2 显式指定模块位置。这样新增模块只需加一条 grid-column，无需动模板字符串。
模块间间距统一用 gap，别碰 margin
在 flex 或 grid 容器中，gap 是唯一能稳定控制模块间距的属性：
真正麻烦的不是怎么拼，而是模块内部是否自带 margin/padding/width —— 这些隐性样式一旦泄漏到拼接层，就会破坏整体节奏。建议所有模块根元素加 all: unset 开头，再显式重置所需样式。
