最简网页框架可用嵌入页面，需设宽高、去边框（frameborder="0"和border:none）及隐藏滚动条（scrolling="no"或overflow:hidden），但跨域受限；css grid更稳，用grid-template-areas或grid-template-columns定义区域，注意ie11兼容性；vue/react中/需在布局组件预判权限与路径；已废弃，禁用。
怎么用 <iframe></iframe> 做最简网页框架？
直接嵌入其他页面是最轻量的框架做法，适合后台管理页、仪表盘这类需要局部刷新的场景。但要注意：<iframe></iframe> 默认有边框、滚动条和空白间距，不加样式会显得很割裂。
- 必须设
width和height，否则高度塌陷——浏览器不会自动撑开 - 去掉默认边框：加
frameborder="0"（HTML5 中已废弃，但兼容性仍需写）+ CSS 的border: none - 隐藏滚动条用
scrolling="no"（旧属性）或更可靠的overflow: hidden在父容器上 - 跨域时
<iframe></iframe>内内容无法被父页 JS 访问，也拿不到document.title或尺寸
示例：
<iframe src="sidebar.html" width="200" height="600" frameborder="0" style="border: none;"></iframe>
display: grid 搭框架为什么比 float 更稳？
用 CSS Grid 布局做响应式框架，核心是把页面切分成固定区域（比如 header / sidebar / main / footer），而不是靠浮动元素“挤”出来。它天然支持行列定义、对齐控制和显式尺寸约束。
-
grid-template-areas是最直观的写法，但区域名不能含空格或特殊字符，比如"header header" "nav main" "footer footer" - 侧边栏固定宽度 + 主内容自适应，推荐用
grid-template-columns: 240px 1fr，别用auto——容易被内容撑变形 - IE11 支持 Grid，但只认旧语法（
-ms-grid），如果还要兼容，得额外写一遍，实际项目中多数已放弃 - Grid 容器内子元素默认不继承
width: 100%，main 区域要显式设width: 100%否则文字会溢出
Vue/React 里用 <router-view></router-view> 或 <outlet></outlet> 当框架出口，要注意什么？
单页应用（SPA）的框架本质是“壳组件”套住路由内容，不是真嵌 HTML 文件。这时候框架逻辑在 JS 层，HTML 只剩一个挂载点。
立即学习“前端免费学习笔记（深入）”；
- Vue Router 的
<router-view></router-view>必须放在有name的组件里才能命名视图，否则所有路由都挤进同一个出口 - React Router v6 的
<outlet></outlet>不接受children，它只渲染当前匹配路由的element，父组件里写死的内容会被完全替换 - 导航守卫（如权限判断）要提前写在布局组件里，不能等
<outlet></outlet>渲染完再检查——那时候页面已经闪了一下 - 如果框架里有固定 Header，又想让某些页面（如登录页）不显示它，得用
useLocation()判断路径，而不是靠条件渲染整个 Layout
为什么别用 <frameset></frameset> 和 <frame>？
这两个标签在 HTML5 中已被完全移除，Chrome/Firefox/Safari 都不再支持。即使你写进去，浏览器也会当作未知标签忽略，变成一堆无样式的文本块。
- 错误现象：页面空白、控制台报
The element <frameset> is obsolete</frameset>，但没明确提示“不渲染” - 旧书或老教程里还提它，是因为上世纪 90 年代用它实现“左侧菜单不变、右侧内容变”的效果——现在用
<iframe></iframe>或前端路由更可控 - SEO 极差：搜索引擎无法关联 frame 之间的语义，各 frame 页面被当成独立 URL 索引，权重分散
- 移动端完全不可用：frame 尺寸无法响应式缩放，触摸事件经常错位
真正麻烦的不是“怎么搭”，而是“搭完要不要维护”。Grid 布局写一次能管三年，<iframe></iframe> 得操心跨域和高度同步，路由框架得处理加载状态和错误边界——选哪个，取决于你下周还想不想改它。
