新手应死磕display、position、box-sizing、width、height、padding、margin、font-size、line-height、color、text-align这12个属性，它们覆盖90%布局问题，任意设错易致页面塌陷或错位。
新手该死磕哪12个属性？不是“全”，而是“最常改、最易错、最影响布局”
别一上来就翻《CSS 权威指南》。真正卡住新手的，从来不是冷门语法，而是这 12 个高频属性：它们覆盖日常排版中 90% 的问题，且任意一个设错，页面就可能“塌”或“错位”。
它们按功能分三组，每组都对应一个核心认知盲区：
-
display和position→ 控制“元素怎么待在页面上”（布局行为开关） -
box-sizing、width/height、padding/margin→ 管理“盒子到底多宽”（尺寸计算根源） -
font-size、line-height、color、text-align→ 决定“文字怎么读得清”（文本呈现基础）
其他属性（比如 background、border、box-shadow）属于“加效果”，而上面这 12 个是“让结构不崩”的底线。
display 和 position：改错一个，整个结构就“飘”了
这两个属性是布局的底层开关，新手最容易在这里栽跟头。
立即学习“前端免费学习笔记（深入）”；
-
display决定元素“存在形态”：block（独占一行）、inline（同行排列，但不能设宽高）、inline-block（同行 + 可设宽高）、flex（启用弹性布局）是实际项目中最常用的值 -
none不仅隐藏元素，还让它彻底脱离文档流；而visibility: hidden只是“看不见”，位置还在 —— 这是面试和调试时高频混淆点 -
position决定“定位依据”：static（默认，不参与定位）、relative（相对自己原来的位置偏移，不影响别人）、absolute（脱离文档流，相对于最近的position非static祖先定位）、fixed（相对于视口固定） - 常见错误：
position: absolute元素设margin: auto想居中？失败。它必须同时定义left和right（水平居中）或top和bottom（垂直居中），才能触发自动计算
box-sizing / width-height / padding-margin：所有“宽度不对”的问题都出在这儿
新手以为 width: 200px 就是总宽，结果加了 padding: 10px 后内容溢出——这就是没统一 box-sizing 的典型症状。
- 必须在全局重置：
* { box-sizing: border-box; }。这是现代项目的标配，否则width只算 content 区域，padding 和 border 都会额外撑大盒子 -
width/height的百分比值，是相对于父容器的 content 宽高，不是整个父盒（含 padding/border） -
margin在块级元素间会发生合并（collapse）：两个<p>的上下 margin，浏览器只保留较大的那个，不是相加 - 行内元素（如
<span>）对margin-top/margin-bottom和padding-top/padding-bottom无效 —— 它们不影响布局流，只影响行高
font-size / line-height / color / text-align：文本不是“写完就完”，而是要协同控制
这四个属性看似简单，但组合不当会导致可读性灾难，比如嵌套后行高失真、缩放失效、对齐错位。
-
font-size推荐用rem（相对根元素）而非像素硬编码；1rem默认 =16px，但你可以在<html>上动态改，实现整站缩放 -
line-height务必用无单位数值（如1.5），表示“当前字号的倍数”；若写成line-height: 24px，子元素继承的是固定像素值，嵌套时行高会严重失真 -
text-align只作用于**块级元素内的行内内容**（比如段落里的文字），对块级子元素（如 div）无效 —— 想居中一个 div，请用display: flex或margin: 0 auto -
color支持多种写法：#333、rgb(51, 51, 51)、hsl(0, 0%, 20%)，但 RGBA（带透明度）在旧版 IE 中不支持，需留意兼容场景
真正难的不是记住属性名，而是理解每个属性背后“谁影响谁、谁依赖谁”。比如改了 box-sizing，width 行为就变；改了 font-size，line-height 若没配好，文字就挤在一起。这些耦合关系，才是新手最该盯住练的点。
