CSS高频属性可分为五类：布局类（display、position等）、尺寸间距类（width、padding等）、样式表现类（color、font等）、交互动效类（cursor、transition等）及易忽略的维护优化技巧。
CSS属性虽多，但真正高频使用的其实就几十个。关键不是死记硬背，而是理解分类逻辑和典型使用场景——这样写样式时能快速定位该用哪个属性，也方便团队协作和后期维护。
布局类属性：控制元素在页面中的位置与结构
这类属性决定“东西放哪儿、怎么排”，是CSS最核心的分类。掌握好它们，80%的页面结构问题都能解决。
-
display：决定元素类型（block/inline/flex/grid），是布局起点；比如用
display: flex替代浮动做导航栏，代码更简洁、行为更可控 - position + top/right/bottom/left/z-index：用于精确控制层叠与偏移，适合模态框、下拉菜单等局部定位需求
- float 已基本被 Flex/Grid 取代，新项目中尽量避免使用
- grid-template-areas 和 flex-direction 属于语义化布局工具，配合命名区域或方向控制，可读性远高于纯数值定位
尺寸与间距类属性：统一控制“大小”和“距离”
这类属性直接影响视觉节奏和响应式表现，建议通过设计系统约束取值范围，避免随意写像素值。
-
width / max-width / min-width：响应式中优先用
max-width配合margin: 0 auto实现居中容器 - padding / margin：推荐使用 rem 或 em 单位，配合统一的间距标尺（如 4px/8px/16px/24px 四档）
- box-sizing: border-box：全局设置，让 width 包含 padding 和 border，计算更直观
样式表现类属性：定义“看起来什么样”
这类属性数量最多，但多数有明确用途边界，按功能分组记忆效率更高。
立即学习“前端免费学习笔记（深入）”；
-
color / background / border / outline：基础视觉层，注意
outline主要用于可访问性聚焦状态，不要用来替代 border -
font-family / font-size / line-height / text-align：文字排版四件套，建议用
rem控制字号，line-height用无单位数值（如 1.5）避免继承混乱 -
opacity / visibility / display：三者都影响可见性，但行为不同——
opacity: 0仍占位且响应事件；visibility: hidden占位但不响应；display: none完全移除渲染流
交互与动效类属性：增强用户体验的“点睛之笔”
这类属性要克制使用，优先保障可访问性和性能，避免滥用过渡和动画干扰用户操作。
-
cursor / user-select / pointer-events：微调交互反馈，比如禁用文本选中用
user-select: none，比 JS 阻止默认行为更轻量 - transition：只对 opacity、transform、color 等廉价属性做过渡，避免触发布局重排（reflow）
- transform：替代 left/top 做位移或缩放，性能更好；配合 will-change 提前提示浏览器优化
不复杂但容易忽略：把属性按功能归类后，再结合 BEM 或 CSS-in-JS 的原子化思路拆解样式模块，维护成本会明显下降。
