新手学CSS应先掌握12个核心属性：display/position控制布局行为，box-sizing/width-height/padding-margin管理盒子模型，font-size/line-height/color/text-align处理文本呈现，background/border/outline/box-shadow负责视觉效果。
新手学 CSS，别一上来就啃《CSS 权威指南》——先死磕这 12 个属性，覆盖 90% 的日常排版和样式需求。它们不是“最全”，
而是“最常改、最易错、最影响布局结果”的核心项。
这两个属性决定了元素“怎么待在页面上”，改错一个，整个结构可能塌掉。
display 控制元素的“存在形态”：block（独占一行）、inline（同行排列，不能设宽高）、inline-block（同行+可设宽高）、flex（启用弹性布局）是高频值；none 不仅隐藏还彻底脱离文档流，和 visibility: hidden 有本质区别
position 决定“定位依据”：static（默认，不参与定位）、relative（相对自身原位置偏移，不影响他人）、absolute（脱离文档流，相对于最近的 position 非 static 祖先定位）、fixed（相对于视口固定）；sticky 是“滚动时粘住”的混合体，但必须配合 top 或 bottom 才生效position: absolute 元素设 margin: auto 居中却失败——它需要同时定义 left/right 和 top/bottom 才能触发自动计算所有尺寸问题，根源都在这里。新手常以为“设了 width 就是盒子总宽”，其实不是。
box-sizing 必须统一设为 border-box（现代项目标配），否则 width: 200px; padding: 10px; 会让实际宽度变成 220px，极易导致布局溢出width/height 默认只作用于 content 区域；百分比值是相对于父容器 content 宽高的，不是整个父盒padding 是内容到边框的距离，会撑大盒子；margin 是盒子外边距，用于控制元素间距；注意 margin 在块级元素间会发生合并（collapse），比如两个 p 的上下 margin 只保留最大值span）对 padding-top/bottom 和 margin-top/bottom 无效——它只影响行高，不会推开其他行文本不是“写完就完”，它的可读性、对齐、缩放全靠这四个属性协同控制。
立即学习“前端免费学习笔记（深入）”；
font-size 推荐用 rem（相对根元素）或 em（相对父元素），避免像素硬编码；1rem 默认 = 16px，但可在 html 上动态改，实现全局缩放line-height 用无单位数值（如 1.5），表示“当前字号的倍数”；若写成 line-height: 24px，子元素继承的是固定像素值，会导致嵌套时行高失真color 支持 rgba(0, 0, 0, 0.7) 直接设透明度，比 opacity 更安全——后者会让整个元素（含子元素）变透明text-align 只对**块级容器内的行内内容**起作用；想让一个 div 水平居中，不能对它自己设 text-align: center，而要用 margin: 0 auto 或 display: flex; justify-content: center
这些属性不改变布局流，但直接决定用户第一眼看到的“质感”。新手常忽略细节差异。
background 是简写属性，顺序是：background-color background-image background-repeat background-position / background-size background-attachment；漏写 background-color 可能导致图片加载前背景透底border 三要素缺一不可：width style color（如 1px solid #ccc）；border: none 和 border: 0 效果相同，但前者更语义清晰outline 是焦点轮廓线，不影响布局，专用于可访问性（如键盘 tab 导航时的高亮）；不要用它替代 border 做装饰box-shadow 第一个长度是水平偏移，第二个是垂直偏移，第三个是模糊半径（越大越虚），第四个是扩散半径（可选），最后是颜色；inset 关键字让它变成内阴影真正卡住新手的，往往不是“不知道有这个属性”，而是“不知道它在哪一级生效”“和其他属性冲突时谁赢”“浏览器默认值是什么”。把这 12 个属性的默认值、继承性、触发重排/重绘行为记熟，比背一百个冷门属性有用得多。
服务热线