结论是盒模型本身不负责多栏，真正实现多栏的是column-系列属性、flex或grid；但box-sizing设为border-box是前提，否则列宽计算错误、间隙错位、内容溢出。
直接说结论：盒模型本身不负责“多栏”，它只管单个元素怎么算尺寸；真正实现多栏的是 column- 系列属性、flex 或 grid。但盒模型设置不当，会让所有多栏方案集体失效——比如列宽算不准、间隙错位、内容溢出。
为什么 box-sizing: border-box 是多栏布局的前提
默认的 box-sizing: content-box 下，给一个 width: 300px 的列容器加 padding: 20px 和 border: 1px，实际占宽是 342px。当用 flex 均分三列时，这会导致总宽超容器、换行或滚动条出现。
- 全局写
* { box-sizing: border-box; }，让所有元素的width包含padding和border - 特别注意：如果用了
column-gap: 2rem，再给列容器设padding: 1rem，左右内边距 + 列间隙 ≠ 你预期的对称留白——column-gap只作用于列之间，不包含容器边缘 - 旧项目中若已有
content-box元素混用，不要全局覆盖，改用选择器精准重置：.multi-column > * { box-sizing: border-box; }
column-width 和 column-count 共存时的实际行为
很多人以为写了 column-count: 3 就一定出三列，结果小屏上文字挤成一条缝；或只写 column-width: 180px，大屏下却只出一列——问题不在属性，而在没理解约束优先级。
-
column-width是“理想列宽”，浏览器据此动态计算列数，优先级高于column-count -
column-count是“最多列数”，仅作上限，不是保证值；例如column-width: 200px; column-count: 3;，容器宽500px时出 2 列（200 × 2 = 400 ≤ 500），不是 3 列 - 响应式推荐写法：
column-width: 16rem;+column-count: 8;（兜底防大屏分太多列） - IE11 及更早版本不支持
column-width，必须降级为column-count并配合媒体查询手动调列数
break-inside: avoid 不是万能解，尤其在 Safari 上
段落被劈成两半、图片被切开，不是 bug，是多列布局的默认行为。靠 break-inside: avoid 拦截，但兼容性坑很深。
- 给
p或img直接加break-inside: avoid可阻止跨列断裂 - Safari 15.4 之前只认
break-inside: avoid-column，需双写：break-inside: avoid; break-inside: avoid-column; - 如果父容器设了
overflow: hidden，break-inside: avoid会失效——浏览器宁可裁剪也不换列 -
column-span: all（标题跨列）目前仅 Chrome/Edge 支持，Firefox 和 Safari 仍不可靠，慎用
column-gap 与 flex-gap / grid-gap 的本质区别
column-gap 看起来和 gap 一样，但它是多列上下文专属属性，不能和 flex/grid 的 gap 混用或互换。
-
column-gap只在columns布局中生效，对display: flex或display: grid容器无效 - Flex/Grid 中必须用
gap（或老式margin手动算），且gap会同时影响行和列间距（row-gap/column-gap可拆分） - 不要试图用
column-gap控制 flex 子项间距——它会被忽略，连 warning 都不报 - 移动端调试时，注意某些安卓 WebView 对
column-gap的解析有偏差，建议用固定像素值（如column-gap: 16px）而非rem或%
最常被忽略的点：多列布局的文本流是连续的，它不改变 DOM 顺序，也不产生新容器；而 flex/grid 是独立布局上下文，会重新排列子元素。选哪种，取决于你是在排“一段文章”，还是在排“几个卡片”。前者用 column-，后者别硬套——否则 padding、margin、伪元素都会行为异常。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
