用 display: grid 搭三栏主干结构最直接，推荐线性定义列宽与行高，配合 gap 控制间距；iframe 适用于跨域模块隔离，需 postmessage 通信；flexbox 更适合一维弹性布局；避免滥用 absolute 定位破坏语义与响应式。
用 display: grid 搭三栏主干结构最直接
多数现代页面框架只需要 header、main、aside、footer 四块区域，display: grid 是唯一能同时控制行+列且无需嵌套的方案。别一上来就写 grid-template-areas，维护成本高——改一个名字就得同步更新所有相关声明。
- 推荐用线性定义：
grid-template-columns: 240px 1fr 320px明确侧边宽度和主内容弹性占比 -
grid-template-rows: auto 1fr auto让main区域撑满剩余高度（注意：需父容器设min-height: 100vh） - 用
gap控制间距，避免子元素用margin导致父子 margin 合并 - IE11 不支持 Grid，若必须兼容，得 fallback 到
display: flex或老式 float 清除方案
iframe 加载独立模块适合跨域或隔离运行时
当 header、nav、dashboard 等模块由不同团队开发、部署在不同域名下，或需要完全独立的 JS 执行上下文与样式作用域时，iframe 是物理级隔离的唯一选择。它不是“偷懒”，而是工程边界划分的刚需。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 每个
iframe加载单独 HTML 文件，如src="nav.html"，彼此 DOM 和全局变量互不污染 - 必须设
name属性（如name="nav-frame"），否则表单提交或锚点跳转会失效 - 主页面无法直接访问
iframe内 JS 变量，通信需走postMessage，且双方都要加监听和 origin 校验 - 移动端 Safari 对
iframe高度自适应支持差，常需 JS 动态读取子页面document.body.scrollHeight并重设height
Flexbox 做局部弹性布局比 Grid 更轻量
Grid 天然适合整体页面骨架，但遇到卡片列表、工具栏、表单分组这类“一维流式排列”场景，display: flex 启动更快、代码更短、兼容性更好（支持到 IE10）。
- 横向均分三按钮：
display: flex; justify-content: space-between比 Grid 的三列定义更直观 - 卡片内文字溢出要截断？记得给 flex 项加
min-width: 0，否则overflow: hidden不生效 - 垂直居中一行文字：
display: flex; align-items: center，不用算 line-height 或 transform - 慎用
flex: 1嵌套——外层 flex 容器设了flex-direction: column，内层再设flex: 1容易导致高度计算冲突
别把 position: absolute 当布局主力
它只该用于浮层、气泡、固定悬浮按钮等脱离文档流的元素。拿它排 header/nav/main/footer，等于主动放弃语义化、响应式和可访问性。
- 父容器没设
position: relative，子元素会相对于 viewport 定位，一滚动就飘走 - 绝对定位元素不占文档流，
footer可能被压在main下面，且屏幕阅读器读序错乱 - 宽度/高度不会随内容撑开，长文本或动态数据进来容易溢出或遮挡
- 媒体查询里改
top/left值不如直接换 Grid 列数或 Flex 方向来得稳定
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
