这里不按属性字母表堆知识,而是按“正在解决什么问题”组织。先进入对应主题建立心智模型,再把页面中的属性表当作速查手册。
按问题查找
-
空白、换行和省略:文本空白、断行与省略——
white-space、break-spaces、overflow-wrap、word-break、hyphens、line-clamp。 -
元素为什么不肯缩、尺寸为什么溢出:布局、尺寸与渲染边界——自动最小尺寸、
min-inline-size: 0、minmax(0, 1fr)、固有尺寸、图片裁切、定位和包含。 -
滚动错位、滚动穿透和触摸手势:滚动、命中与原生交互——
overflow: clip、scroll-padding、scroll-margin、overscroll-behavior、touch-action、pointer-events。 -
页面不横向滚动但按钮消失:检查控件边界与裁剪祖先——
scrollWidth、getBoundingClientRect()与不换行动作组。 -
组件库控件被全局样式撑坏:原生控件样式隔离——原生输入层、主题 API 与组合交互状态。
-
提示出现时页面跳动、提示被原生弹窗挡住:浮层提示与挂载层——
fixed、模态顶层与布局位移验证。
阅读顺序
- 先看每篇开头的“先判断什么”,确定问题属于内容、容器还是交互边界。
- 再使用属性对照表选择机制,不用多个看似有效的属性叠加碰运气。
- 最后检查兼容性、可访问性和极端内容:长 URL、CJK 文本、缩放字体、键盘操作、触摸滚动与窄容器。
收录边界
这里优先保存容易忘但能直接解决真实问题的属性,以及它们与相邻属性的区别。仍在演进的 CSS 草案能力会明确标为渐进增强;浏览器支持范围应根据项目目标单独检查,不能只根据规范中出现了某个值就默认可用。