首选 display: grid 实现三栏布局，用 grid-template-columns: 200px 1fr 240px 定义结构，天然等高、语义清晰；兼容 ie11 时改用 flex，中间栏必须设 flex: 1 且加 min-width: 0；响应式需重写列定义而非覆盖 display，全局 box-sizing: border-box 防错位。
直接用 display: grid，别碰 float 或 calc() —— 这是当前最稳、最易维护、语义最清晰的三栏实现方式。
为什么 grid-template-columns 是首选写法
它一行定义结构，天然等高，不依赖 DOM 顺序，也不用清浮动或 hack 高度。左右定宽 + 中间自适应，写成：grid-template-columns: 200px 1fr 240px 就完事。
-
1fr不是百分比，而是“剩余空间的 1 份”，和flex: 1行为一致 - 所有子项默认拉伸等高（只要没设
align-self: flex-start） - 列间距统一用
gap: 12px，比margin可靠，不会塌陷 - IE11 不支持
1fr和gap，真要兼容就切回display: flex并显式写flex: 1 1 auto
display: flex 实现左右固定+中间自适应的关键点
Flex 方案依然可靠，尤其在需兼容旧版 Safari 的项目中。但必须写对 flex 值，否则中间栏会被内容撑窄甚至换行。
- 父容器设
display: flex和gap: 12px - 左栏用
flex: 0 0 200px（不放大、不缩小、固定宽），比单纯width: 200px更稳妥 - 中间栏必须用
flex: 1（等价于flex: 1 1 0%），不是flex: 1 1 auto - 右栏同理，
flex: 0 0 240px - 加
min-width: 0到中间栏，防止单词或图片强行撑宽导致错位
响应式断点里最容易漏掉的两件事
小屏下三栏挤成一排、用户得左右滑动，说明响应式没生效——这不是布局写错了，是断点逻辑漏了。
- 必须在
@media (max-width: 768px)中重写列定义：grid-template-columns: 1fr（Grid）或flex-direction: column（Flex） - 别用
display: block覆盖父容器，会彻底破坏 Grid/Flex 上下文 - 如果主内容要优先被读屏器识别或利于 SEO，给
<main></main>加order: -1，而不是靠 HTML 顺序硬调 - 平板断点（768px–1024px）可只隐藏一侧边栏：
.sidebar-left { display: none; }
盒模型不统一是绝大多数错位问题的根源
几乎所有“明明写了 width: 200px 却占了 220px”的问题，都出在没控制好 box-sizing。
- 全局加
* { box-sizing: border-box; }，让width包含padding和border - 别在直接参与栅格计算的元素（如
.col-4）上加margin，它会干扰宽度分配；用gap或内部再包一层<div class="sec"></div>来管间距 - 混合布局是最大陷阱：比如在
display: grid容器里又给子项加float或position: absolute，它们会直接退出布局流，调试时根本找不到原因
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
