之前我们讲了 **HTML（骨架）**和 CSS布局、响应式（适配） ，现在轮到 CSS（皮肤与妆容） 了，也就是一些核心属性。
这份清单的目标是：提炼出 20% 最核心的属性，覆盖你 85% 的开发场景。
别背字典，背"高频词"
你有没有过这种经历：想把一个 div 居中，脑子里闪过 justify-content、align-items、text-align，试了一圈发现还是歪的？或者想写个阴影，却忘了 box-shadow 那四个参数的顺序？
CSS 属性成千上万，但真正能帮你搞定日常开发的，其实就那一小撮。
今天这篇不是教科书，而是只留下了最核心、最常用、最容易混淆的属性。建议收藏，写样式卡壳时，拿出来看一眼。
一、 布局与盒模型（Layout & Box Model）
这是 CSS 的地基。地基不稳，页面必崩。
| 核心属性 | 常用值/技巧 | 一句话说明 / 避坑指南 |
|---|---|---|
box-sizing |
border-box |
让 width 包含 padding 和 border。当你想让盒子大小更容易控制、布局不会被内边距和边框撑开时，box-sizing: border-box 很重要。 |
display |
flex, grid |
布局引擎开关。 |
block, inline-block |
inline-block 既能设宽高又能并排，但在 Flex 时代用得少了。 |
|
none |
隐藏元素（不占位）。注意：屏幕阅读器也会忽略它。 | |
margin |
0 auto |
水平居中神技（前提是元素有宽度且是 block）。 |
10px 20px |
简写顺序：上下、左右。（四个值则是：上右下左，顺时针）。 | |
padding |
- | 内边距。注意：背景色会延伸到 padding 区域。 |
width / height |
100vw, 100vh |
视口单位。min-height: 100vh 常用于撑满全屏背景。 |
max-width |
100% |
响应式图片核心。让大图在小屏里自动缩小，不撑破容器。 |
min-height |
100vh |
常用在布局根容器，保证内容少时 footer 也能沉底。 |
visibility |
hidden |
隐藏元素，但保留占位（像个隐形人挡在那里）。 |
overflow-y |
auto |
内容超长时自动出现滚动条（常用于侧边栏或弹窗内部）。 |
二、 Flexbox 弹性布局（一维排版之王）
只要记住这几个，90% 的对齐问题都能解决。
| 属性 (父元素) | 核心值 | 功能描述 |
|---|---|---|
display |
flex |
激活弹性盒子。 |
flex-direction |
row (默认) |
横着排。 |
column |
竖着排（手机端常用）。此时主轴变成垂直方向。 | |
justify-content |
center |
主轴居中（横向居中）。 |
space-between |
两端对齐（最常用，比如 标题...更多）。 | |
space-around |
每个元素周围间距相等。 | |
align-items |
center |
交叉轴居中（纵向居中）。 |
stretch |
拉伸填满高度（默认值，除非你设了高度）。 | |
flex-wrap |
wrap |
空间不够时自动换行。 |
| 属性 (子元素) | 核心值 | 功能描述 |
|---|---|---|
flex |
1 |
万能简写。让这个元素霸占剩余的所有空间（自适应宽度）。 |
0 0 auto |
强制元素不准缩小、不准拉伸（常用于头像、图标固定宽度）。 | |
align-self |
flex-end |
搞特殊 。让某个子元素自己沉底，不听父元素 align-items 的话。 |
order |
-1 |
视觉顺序重排。不改 HTML 结构把元素提到最前面。 |
三、 Grid 网格布局（二维排版的神）
全局上比 Flex 更强大，适合做复杂的相册、仪表盘布局。
| 属性 (父元素) | 核心值/技巧 | 功能描述 |
|---|---|---|
display |
grid |
激活网格。 |
grid-template-columns |
1fr 1fr 1fr |
三等分。fr 是剩余空间单位。 |
repeat(3, 1fr) |
上面的简写版。 | |
200px 1fr |
侧边栏固定，右侧自适应。 | |
gap |
20px |
格子之间的间距（比手动写 margin 优雅一万倍）。 |
Grid 最强大其实在于子元素的控制。
| 属性 (子元素) | 核心值/技巧 | 功能描述 |
|---|---|---|
grid-column |
1 / -1 |
通栏霸屏。让一个格子横跨从第一条线到最后一条线。 |
span 2 |
这个元素要占两个格子的宽度。 | |
grid-area |
header |
配合 grid-template-areas 使用，用名字来布局，极度直观。 |
四、 定位系统（Positioning）
解决"我想让它去哪它就去哪"的问题。
| 属性 | 核心场景 | "口诀"与避坑 |
|---|---|---|
position: relative |
微调位置 | "子绝父相"的爸爸。保留原占位，限制内部绝对定位的子元素。 |
position: absolute |
悬浮角标、覆盖层 | "子绝父相"的儿子。脱离文档流，相对于最近的非 static 祖先定位。 |
position: fixed |
吸顶导航、侧边广告 | 相对于浏览器窗口定位。滚动页面它不动。 |
position: sticky |
粘性标题 | 它是 relative 和 fixed 的私生子。滚到阈值就吸顶。 |
z-index |
1, 999 |
层级叠加。注意：只有设置了 position (非 static) 才会生效！ |
inset |
0 |
现代简写 。等同于 top:0; right:0; bottom:0; left:0，全屏铺满必备。 |
transform |
translate(-50%, -50%) |
配合 absolute 实现完美绝对居中（无论宽高多少）。 |
五、 文本与字体（Typography）
让文字不仅能读，还要好看。
| 属性 | 常用技巧 | 说明 |
|---|---|---|
line-height |
1.5 |
黄金阅读行高。不带单位表示倍数（推荐）。 |
= height |
单行文字垂直居中的老派黑魔法。 | |
text-align |
center, left, right |
文本对齐。 |
white-space |
nowrap |
强制不换行（常配合省略号使用）。 |
overflow |
hidden |
溢出隐藏。 |
text-overflow |
ellipsis |
省略号三件套 ：white-space: nowrap + overflow: hidden + text-overflow: ellipsis。 |
font-weight |
400(常规), 700(加粗) |
建议用数字代替 bold，更精准。 |
text-decoration |
none |
去下划线 。<a> 标签的第一件事通常就是干掉它。 |
text-transform |
uppercase |
强制全大写。设计感标题常用，不用手动改 HTML。 |
letter-spacing |
1px |
字间距。大标题稍微加点间距，高级感立马就来了。 |
user-select |
none |
禁止选中。防止用户手贱选中了按钮上的文字，提升 APP 质感。 |
六、 视觉装饰（Visuals）
页面的"美妆"部分。
| 属性 | 核心用法 | 技巧 |
|---|---|---|
background |
url(...) no-repeat center / cover |
背景图全能简写 。/ cover 保证图片撑满且不变形。 |
border |
1px solid transparent |
调试边框。或者用于预留位置，防止 hover 加边框时产生抖动。 |
border-radius |
50% |
画圆。 |
4px |
现代 UI 标配的小圆角。 | |
box-shadow |
0 4px 12px rgba(0,0,0,0.1) |
X偏移 Y偏移 模糊半径 颜色。颜色记得用透明度，别用纯黑，太生硬。 |
cursor |
pointer |
鼠标变小手。交互元素的必修课，别让用户猜这能不能点。 |
object-fit |
cover |
<img> 标签的神器。让图片像背景图一样裁剪，不再被拉伸变形。 |
backdrop-filter |
blur(10px) |
毛玻璃效果。背景模糊，苹果味 UI 必备（注意兼容性）。 |
opacity |
0.5 |
整体透明度。注意：子元素也会跟着变透明，且无法单独恢复。 |
七、 现代 CSS 魔法（Modern Utilities）
少写 JS，多用 CSS，这里只举一些小例子说明有一些高级用法。
CSS 变量 (--var)：
css
:root { --primary-color: #007bff; }
.btn { background: var(--primary-color); }
/* 改一处，全站变色，换肤必备 */计算 (calc)：
css
width: calc(100% - 40px);
/* 别心算像素了，让浏览器帮你算。注意减号两边要有空格！ */滤镜 (filter)：
css
filter: grayscale(100%); /* 网站变黑白（哀悼模式） */
filter: blur(5px); /* 毛玻璃效果基础 */总结
这份清单肯定没包含所有属性，但如果你能熟练运用这些，你已经超越了 85% 只会复制粘贴的前端开发者了。
记住 CSS 的最高境界： 不是背下所有属性，而是当你想实现一个效果时，能瞬间反应出"用 Flex 还是 Grid"，"用 Padding 还是 Margin"。