新手学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 和 position：布局行为的开关
这两个属性决定了元素“怎么待在页面上”，改错一个，整个结构可能塌掉。
-
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才能触发自动计算
box-sizing、width/height、padding/margin：盒子模型的实操三件套
所有尺寸问题，根源都在这里。新手常以为“设了 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、line-height、color、text-align：文本呈现的四大支柱
文本不是“写完就完”，它的可读性、对齐、缩放全靠这四个属性协同控制。
立即学习“前端免费学习笔记（深入）”；
-
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、border、outline、box-shadow：视觉层的边界与质感
这些属性不改变布局流，但直接决定用户第一眼看到的“质感”。新手常忽略细节差异。
-
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 个属性的默认值、继承性、触发重排/重绘行为记熟，比背一百个冷门属性有用得多。
