CSS入门装修
先看见网页「长什么样」由什么决定
上一节你学会了 HTML——它决定页面有什么（标题、段落、按钮）。 但同样一个按钮，可以长得朴素，也可以长得精致：颜色、大小、留白、圆角……这些「长什么样」的事，归 CSS 管。 先别管语法，只用眼睛看：下面是同一个卡片的素颜版和装修版——中间差的，就是 CSS。
素颜 · 还没穿 CSS
邻里小卖部
手冲咖啡 · ¥28
装修 · 穿上 CSS
邻里小卖部
手冲咖啡 · ¥28
HTML 决定页面有什么；CSS 决定这些东西颜色、大小、位置——也就是「装修」。 接下来几节，就拆开看这层装修由哪些零件组成。
Figma 属性面板写成 CSS
选中一个按钮图层：左边是 Figma 右侧属性面板，右边是对应的 CSS——字段和声明一一对应。悬停任一侧，另一侧会一起亮起。
CSS 的属性名几乎跟 Figma 一样：padding = 内边距、border-radius = 圆角、background = 填充色、font-size = 字号……
会用 Figma，就已经认识大半 CSS 属性了。
.button {padding: 20px;border-radius: 8px;background: #FFDC58;font-size: 14px;color: #000000;}
选中一个图层，右侧属性面板就是它「长什么样」的全部信息。
一组 属性: 值。属性名几乎跟 Figma 一样：padding = 内边距、border-radius = 圆角。
最常见的两类文字 · 颜色
CSS 属性有上百个，但最常打交道的就两类：文字（font-size 字号、font-weight 字重、line-height 行距）和颜色（color 字色、background 底色、border-color 边框色）。其余的——留白、排列、状态…遇到再查。
不用背，需要时查 MDN 的 CSS 属性参考 ↗ 即可。
盒子的世界每个元素都是从里到外的四层
在 CSS 眼里，按钮、卡片、标题……每个元素都是一个盒子（box）。盒子从里到外四层： 内容 content → 内边距 padding → 边框 border → 外边距 margin。 改「松紧、描边、和邻居的距离」，改的就是这几层——不是另起一套宇宙。
在 DevTools 里选中一个元素，看到的「套盒图」就是右边这张结构（数值为 0 只表示当前这层没厚度）：
| 层 | CSS | 是什么 |
|---|---|---|
| content |
| 真正放字、图、子节点的区域 |
| padding |
| 内容到边框之间的「肚子」空白 |
| border |
| 描边墙的厚度与样式 |
| margin |
| 这个盒子和外面邻居之间的空隙 |
padding = 盒子里面鼓起来；
margin = 盒子外面推开别人。
设计稿里 Auto Layout 的「Padding」多半对应 CSS 的 padding；
图层与图层之间的间距，更接近 margin 或父级的 gap。
落到 padding 这一层：它怎么写？可以按方向拆成四边，各写各的；也可一次写完（简写）。
| 属性 | 管哪一边 | 口语 |
|---|---|---|
| padding-top | 上 | 顶内边距 |
| padding-right | 右 | 右内边距 |
| padding-bottom | 下 | 底内边距 |
| padding-left | 左 | 左内边距 |
简写 padding 按「上 → 右 → 下 → 左」顺时针记（从 12 点方向起）：
| 写法 | 含义 |
|---|---|
padding: 16px | 四边都是 16 |
padding: 8px 16px | 上下 8 · 左右 16（两值） |
padding: 8px 12px 16px | 上 8 · 左右 12 · 下 16（三值） |
padding: 8px 12px 16px 20px | 上 8 · 右 12 · 下 16 · 左 20（四值，顺时针） |
现代写法还有 逻辑边（跟阅读方向走，RTL 友好）：padding-block（上+下）、padding-inline（左+右，在横排里相当于左右）。初学先掌握四边 + 简写即可。
margin · 外边距
border · 边框
padding · 内边距
content · 内容（字 / 图 / 子元素）
padding: 8px（四边紧）
padding: 32px（四边松）
上下 8 · 左右 24（按钮常这样更「胖」一点）
CSS 属性与 HTML 的搭配父子关系 · 继承
上一节 HTML 你见过「框套框」的父子树。CSS 属性不是孤立生效的——它会跟这棵父子树搭配： 有些属性会从父亲传给孩子，这叫继承（inheritance）。 页面不是一堆平铺的盒子，而是套娃：大框里还有小框，CSS 顺着这层关系往下淌。
直觉：Figma 里父 Frame 改了字色，里面的 Text 常跟着变；但父 Frame 的 Padding，不会变成每个子层自己的 Padding。CSS 也一样——会传的、不会传的，要分清。
| 类别 | 例子 | 记法 |
|---|---|---|
| 会继承 |
| 「文字怎么长」——顺着树往下淌 |
| 不继承 |
| 「盒子自己的壳」——只贴在自己身上 |
继承 ≠ 子元素「住在父亲里面」。
嵌套（父子树）永远在；继承只决定：某些属性值要不要自动抄父亲的。
需要强制抄时，才写 inherit；需要掐断时，在子元素上自己写覆盖值。
父 .card · color + font-size
这段字没写自己的 color / font-size，却跟父亲一样。
子按钮（字色也是继承来的）
父 · padding + 黄底
子盒子：自己的底是白的——父亲的 background / padding 没传下来