Grid 是三栏自适应首选方案，用 grid-template-columns 可设定宽+自适应布局（如 200px 1fr 300px）或等比伸缩（1fr 2fr 1fr），配合媒体查询实现响应式单列；gap 控制间距更可靠，避免 margin 塌陷。

用 display: grid 实现三栏自适应最直接

现代浏览器下，display: grid 是三栏自适应的首选方案，无需浮动、不依赖 JavaScript，一行 grid-template-columns 就能定义响应行为。

常见写法是：grid-template-columns: 200px 1fr 300px（左侧定宽、中间自适应、右侧定宽），或全用 fr 单位实现等比伸缩（如 1fr 2fr 1fr）。

• 移动端适配只需加媒体查询，比如在 @media (max-width: 768px) 中改成 grid-template-columns: 1fr 叠成单列
• 注意不要混用 float 或 inline-block，会破坏 Grid 布局上下文
• grid-gap（或 gap）比 margin 更可靠控制栏间距，避免外边距塌陷问题

Flexbox 三栏也能做，但要注意 flex-wrap 和断点处理

如果项目需兼容较老版本 Safari（display: flex 仍是稳妥选择，但默认不换行，三栏会溢出容器。

关键点在于：父容器设 display: flex，子项用 flex: 0 1 300px（不放大、可缩小、基准宽 300px），再配合 min-width: 0 防止内容撑破。

• 必须给父容器设置 flex-wrap: wrap 才能在窄屏时换行，否则需靠媒体查询强制改 flex-direction: column
• IE11 对 flex: 1 解析有偏差，建议显式写全 flex: 1 1 auto
• 文字过长不换行时，word-break: break-word 或 overflow-wrap: break-word 得手动加在内容区

width: calc() 搭配 float 是兼容性最强但最脆弱的写法

这种写法在 IE8+ 都能跑，但已不推荐新项目使用——它对盒模型极其敏感，padding、border、box-sizing 少写一个就错位。

java-api-doc-generator

分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。

下载

典型结构是：左栏 float: left; width: 200px，右栏 float: right; width: 200px，中间用 margin: 0 200px 留白；或者三栏都 float: left，中间用 width: calc(100% - 400px) 计算剩余宽度。

• calc() 里加减号前后必须有空格，写成 calc(100%-400px) 会失效
• 浮动元素父容器必须清除浮动（overflow: hidden 或伪元素 ::after），否则高度塌陷
• 一旦加入 transform 或 position: absolute，浮动逻辑容易失效，调试成本高

别忽略 box-sizing: border-box 这个隐形开关

所有三栏方案里，只要子元素用了 padding 或 border，没设 box-sizing: border-box 就等于在埋雷——计算宽度时会把内边距和边框额外加进去，导致实际占位超预期。

建议全局重置：* { box-sizing: border-box; }，尤其在 Grid/Flex 容器内部，子项默认是 content-box，很容易让 width: 300px 实际占满 320px（含 10px padding × 2）。

• 某些 CSS 框架（如 Bootstrap 4+）已默认启用，但手写布局时极易遗漏
• Grid 的 fr 单位虽不直接受影响，但若栏内嵌套了传统盒模型布局，问题仍会传导出来
• 移动端 touch 区域偏小、点击失灵，有时就是 padding 被算漏后导致可点区域缩水

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！