最常用的CSS属性仅十几个，覆盖90%布局需求；核心包括盒模型（width/height/padding/margin/box-sizing）、定位（display/position）、文字颜色（color/font-size/line-height等）及响应式（max-width/overflow/transition等）。
最常用的 CSS 属性其实就十几个，覆盖 90% 的日常布局和样式需求；掌握它们比死记全部属性更有效，关键是理解每个属性在什么场景下起作用、哪些值容易出错。
控制尺寸与盒模型：width、height、padding、margin、box-sizing
这五个是布局的基石。没有它们，元素要么塌缩，要么撑破容器。
-
width/height设定内容区大小，默认不包含padding和border—— 这就是为什么加了padding: 20px后按钮变宽却没效果，得配合box-sizing: border-box -
margin支持负值，常用于微调位置或实现“负边距布局”；但margin: auto水平居中只对块级元素 + 有明确width才生效 -
padding不支持负值；内边距过大时容易撑开父容器，尤其在 flex 或 grid 容器里要留意 -
box-sizing: border-box建议全局设置：* { box-sizing: border-box; }，避免每次都要手动计算尺寸
定位与流动：display、position、float（慎用）
display 决定元素“想怎么活”，position 决定它“实际怎么站”。这两者配合错误是布局错乱的主因。
-
display: block/inline/inline-block是基础；inline-block元素间有空格间隙，用font-size: 0或注释删空格可消除 -
display: flex和display: grid是现代布局核心；flex适合一维（行或列），grid适合二维网格；不要在flex容器上再设float，会被忽略 -
position: relative是安全的偏移起点；absolute脱离文档流，找最近的relative/absolute/fixed祖先定位 —— 如果找不到，就相对于 viewport -
float已基本被flex和grid取代；仅在文字环绕图片等极少数场景保留，且必须配clear防止父容器塌陷
文字与颜色：color、font-size、line-height、text-align、background-color
这些属性看似简单，但组合不当会导致可读性崩坏或意外继承。
立即学习“前端免费学习笔记（深入）”；
-
line-height推荐用无单位数值（如1.5），而不是px或em；否则子元素字体变大时行高不会自动缩放 -
text-align: center只对 inline 内容（文字、img、inline-block）生效；想让块级元素居中，得用margin: 0 auto或flex -
color和background-color一定要成对检查对比度；深灰文字配浅灰背景在某些屏幕上几乎看不见 -
font-size优先用rem（基于根字号）或em（相对父级），避免全用px导致缩放失灵
响应式与兼容性关键：max-width、overflow、transition、cursor
这些不是“装饰性”属性，而是保障体验不翻车的底线配置。
-
max-width: 100%必须加在img和video上，否则在小屏上溢出容器 -
overflow: hidden是清除浮动的替代方案之一，但会裁掉绝对定位子元素的溢出部分；overflow: auto在需要滚动时才出现滚动条 -
transition: all 0.3s看似方便，但会触发大量重绘；应明确写transition: background-color 0.3s, transform 0.3s -
cursor: pointer不只是“加个手型”，它是用户判断“这个能点”的唯一视觉线索；但别滥用 —— 普通文字加pointer会误导用户
真正卡住人的往往不是属性记不全，而是某个属性在特定上下文中的隐式行为：比如 display: flex 让子元素默认 align-items: stretch，导致图片被拉高；又比如 position: sticky 必须有滚动容器才能生效。多看浏览器开发者工具里的“Computed”面板，比查文档更快定位问题。
