优先用 column-width 实现响应式多列，配合 column-count: auto；避免同时设置 column-count 和 column-width；通过 orphans/widows、hyphens、word-break 等控制断行断裂；column-rule 不占布局空间且不自动缩放；需用 @supports 作兼容降级。
column-count 和 column-width 怎么选
强制指定列数，浏览器会尽量把内容均分进这么多列里；
是“建议最小列宽”，浏览器根据容器宽度自动算出实际列数，更适配响应式。
常见错误是只设
，结果小屏上文字挤成窄条、行高失控。真要响应式，优先用
，再配合
（默认值）。
小屏下
可能只出一列，大屏自动变成三列甚至四列
不要同时设死
和
，后者会被忽略
若需最小列数保障（比如至少两列），可用
+
防止某列过长
文字跨列断裂、标点孤悬怎么修
多列布局默认按字符流切分，容易把段落末尾的句号、引号单独甩到下一列开头，或让中文词语被硬拆开。
这不是 bug，是 CSS 多列的默认行为。修复靠两个关键属性：
立即学习
“
前端免费学习笔记（深入）
”；
和
控制段落首尾最少保留几行（对多列也生效）
开启断字（需配合
属性和字体支持，中文效果有限，但英文有效）
中文更实用的是
+
（仅 Chrome/Edge 支持较全）
注意：
对
有效，但对内联元素（如
）无效；想保完整句子，得把句子包进块级容器。
column-gap 和 column-rule 的坑
设间距很直观，但单位别乱用：百分比值在多列中表现不稳定，推荐用
或
；
会继承父级字体大小，容易误判。
看似像 border，但它不占布局空间——这点和
不同，不会撑开列宽。常被误以为“没生效”，其实是画在间隙正中，太细或颜色太浅就看不见。
比
更可控
不要指望
响应式缩放，它不随
自动调整粗细
若列内容高度差异大，
会只画到最短列的底部，不是整栏通高
兼容性和 fallback 要不要做
Firefox、Chrome、Safari（≥14.1）、Edge（≥79）都支持原生多列，但 iOS Safari ≤14.0 有渲染错位问题，Android WebView 旧版本可能完全不渲染列间 gap。
不需要 polyfill，但要有降级意识：
所有列样式写在
里，老浏览器直接走单列流式布局
别依赖多列实现核心信息层级，比如把标题塞进
—— 这个属性兼容性更差（iOS Safari 目前不支持）
测试时真机打开，别只信 DevTools 的响应式模式，尤其是横竖屏切换后重排行为
多列布局真正难的不是写法，是内容语义和视觉节奏的匹配。列数变来变去时，段落呼吸感、标题锚点位置、图片对齐方式全得重新校验——这些没法靠 CSS 自动解决。
column-countcolumn-widthcolumn-count: 3column-widthcolumn-count: autocolumn-width: 12remcolumn-countcolumn-widthcolumn-count: 2column-fill: balanceorphans: 2widows: 2hyphens: autolangword-break: keep-allline-break: strictbreak-inside: avoid
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
column-gaprempxemcolumn-rulebordercolumn-rule: 1px solid #e0e0e0column-rule: thin solid #ccccolumn-rulecolumn-widthcolumn-rule@supports (column-count: 2)column-span: all