rgb三位缩写仅当每对字符相同时才有效，如#f60对应#ff6600；盒模型四值缩写顺序固定为上右下左；font缩写必须含font-size和font-family且用/分隔；background缩写会重置所有子属性。
#RGB 三位缩写只认字符重复，不看数值大小
很多人以为 #f60 是 #ff6600 的“省略写法”，其实不是——它是严格基于字符重复性的语法糖。浏览器只检查：红位两位是否相同、绿位两位是否相同、蓝位两位是否相同。只要有一对不重复，整个颜色声明就被丢弃，连报错都不会有。
-
#ff6600→ ✅ 可缩为#f60（ff→f，66→6，00→0） -
#33aa99→ ✅ 可缩为#3a9（注意顺序不能调成#39a） -
#ffcc01→ ❌ 不可缩为#fc1，因为01≠00且 ≠11，整条声明静默失效 -
#123456→ ❌ 全部不重复，#123无效
浏览器解析 #f06 时，不是补零也不是取高位，而是直接复制每位：f→ff，0→00，6→66，结果是 #ff0066。
margin/padding/border 的四值缩写顺序是上右下左
这不是可选项，是 CSS 规范强制的顺时针顺序。写反了不会报错，但效果完全不对——比如 margin: 10px 20px 30px 40px 表示上=10、右=20、下=30、左=40；如果误写成 margin: 10px 20px 40px 30px，左就变成 30px，而不是你想要的 40px。
- 单值：
margin: 12px→ 四边都是 12px - 双值：
padding: 8px 16px→ 上下=8px，左右=16px - 三值：
border-width: 2px 1px 3px→ 上=2px，左右=1px，下=3px - 四值：
margin: 5px 10px 15px 20px→ 严格按上→右→下→左
font 缩写必须包含 font-size 和 font-family，且中间用 / 隔开
font 是少数几个要求「至少两个参数」才能生效的缩写属性。漏掉 font-size 或 font-family，整条声明会被忽略。另外，line-height 必须紧贴 font-size 后面，用斜杠分隔，不能空格或写成单独属性。
- ✅ 正确：
font: bold 16px/1.5 "Helvetica", sans-serif - ❌ 错误：
font: bold 16px "Helvetica" 1.5（缺少/，1.5被当作文本字体名处理） - ❌ 错误：
font: 16px "Helvetica"（缺粗细，但允许用默认值；不过一旦写了其他值，就必须带/）
background 缩写中 background-image 位置会影响渲染行为
background 缩写会重置所有子属性，包括未显式写出的部分。最常踩的坑是：漏写 background-repeat 或 background-position，结果图片默认平铺或居左上角，和预期不符。
- ✅ 显式控制：
background: #fff url(bg.png) no-repeat center / cover - ❌ 静默降级：
background: #fff url(bg.png)→ 等价于background-repeat: repeat; background-position: 0% 0% - ⚠️ 注意：
background-size必须和background-position一起用/分隔，如center / cover
三位颜色缩写最容易被当成“随便省字”，但实际是硬性匹配规则；盒模型缩写顺序一旦记混，调试时很难一眼看出问题；font 和 background 这类多参数缩写，少一个符号或错一个位置，整条声明就失效——它们都不报错，只沉默。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
