flex: 0 0 200px比width: 200px更安全，因前者禁用伸缩、固定基础宽度，后者在Flex容器中仍受flex-shrink: 1影响而被压缩；必须配合box-sizing: border-box避免padding/border额外加宽导致布局错位。
别用 float，也别从 width: 200px 开始写 —— 新手最容易卡在“右侧没贴住”“左边被压扁”“小屏错乱”这三处，根源不是代码写错，而是没理解 flex 的伸缩逻辑和 box-sizing 的实际影响。
为什么 flex: 0 0 200px 比 width: 200px 更安全
只设 width: 200px 在 flex 容器里是危险操作：一旦父容器变窄或内容撑开，左侧可能被压缩（尤其含 padding/border 时），因为默认 flex-shrink: 1 开启。而 flex: 0 0 200px 明确禁用伸缩、固定基础宽度，等价于 flex-grow: 0; flex-shrink: 0; flex-basis: 200px。
- 必须配合
box-sizing: border-box，否则 padding 和 border 会额外加宽，导致右侧留白或溢出 - 如果 left 元素用了
border: 2px solid #000和padding: 10px，但没设box-sizing，那它实际占宽是200px + 4px + 20px = 224px，右侧的margin-left或flex计算就全错了 - 新手常复制示例却漏掉这一行：
.sidebar { box-sizing: border-box; }
右栏用 flex: 1 就够了，别碰 calc()
flex: 1 是现代方案里最干净的写法，它自动填满剩余空间，不依赖具体数值，也不怕响应式断点变化。而 width: calc(100% - 200px) 看似直观，但极易出错：
- 当父容器有 padding 时，
100%是包含 padding 的总宽，计算结果偏大 - 嵌套 flex 容器中，
calc()可能被多次解析，值失真 - IE 对
calc()支持不稳定，尤其带单位混合时（如calc(100% - 200px - 1rem)） - 右栏若含长英文/数字无空格内容，记得加
word-break: break-word防溢出
grid-template-columns: 200px 1fr 简洁但有两个硬限制
这是语义最清晰的写法，一行定义列结构，子元素顺序即渲染顺序，content 可以写在 HTML 前面。但它不是万能替代：
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- IE 全系不支持，Edge ≤15 也不行；若项目需兼容旧版 Edge，必须降级为 flex
- 默认
align-items: stretch会让左右栏等高——右栏内容少时，左栏会被拉长，视觉上像“上浮”，需显式加align-items: start修正 - 别给子项再设
width: 100%，grid 子项默认不继承父宽，双重要求会导致横向滚动或错位 - 加间隙统一用
gap: 16px，不用 margin —— 否则破坏轨道计算，且 gap 在 flex 中不生效，容易混淆
高度对齐不是“bug”，而是默认行为
所有方案里，左栏都不会随右栏内容高度自动拉伸。这不是缺陷，是 CSS 的自然流行为。新手常以为“背景色没对齐”是布局失败，其实：
- flex 下，只有
align-items: stretch（默认值）起作用，但前提是父容器没被其他样式覆盖（比如某些 CSS 重置库会设align-items: flex-start） - grid 下同理，默认等高，但若右栏极短，左栏背景会“悬空”，此时加
align-items: start更符合直觉 - 真要严格等高，靠 CSS 很难稳定实现（BFC 嵌套、伪元素 trick 都有副作用），不如接受“各自撑高”，用阴影或边框弱化高度差异感
真正容易被忽略的是：左侧固定宽度是否包含 border/padding？所有方案中的 200px 指的是 content-box 宽度。如果你用了 box-sizing: border-box，那 width: 200px 就已含 padding 和 border；若没设，就要手动把它们加进计算里——否则右侧永远差那么几像素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
