全面解析 CSS 常见简写语法及其使用规则

在 CSS 中，许多属性支持简写语法，可以更高效地定义多个方向或值的设置。然而，这些简写规则因其多样性常常令人混淆。为帮助你彻底掌握并避免记错，以下是它们的详细解析，一次性弄清楚，告别混淆！

---

1. margin 和 padding

语法规则：

margin: [上] [右] [下] [左];
padding: [上] [右] [下] [左];

• 单个值：所有方向（上、右、下、左）都使用同一个值。

  margin: 10px; /* 上、右、下、左都为 10px */

• 两个值：第一个值为上下，第二个值为左右。

  padding: 10px 20px;
  /* 上、下为 10px，左、右为 20px */

• 三个值：第一个值为上，第二个值为左右，第三个值为下。

  margin: 10px 20px 30px;
  /* 上为 10px，左、右为 20px，下为 30px */

• 四个值：分别对应上、右、下、左。

  padding: 10px 20px 30px 40px;
  /* 上为 10px，右为 20px，下为 30px，左为 40px */

---

2. border

语法规则：

border: [宽度] [样式] [颜色];

• 你可以同时设置边框的宽度、样式和颜色。

  border: 2px solid red;
  /* 边框宽度为 2px，样式为实线，颜色为红色 */

相关的简写属性：

• border-width ：分别表示边框的上、右、下、左宽度，遵循与 margin 类似的规则。

  border-width: 5px 10px;
  /* 上、下为 5px，左、右为 10px */

• border-color：分别表示边框的上、右、下、左颜色。

  border-color: red green blue yellow;
  /* 上为红色，右为绿色，下为蓝色，左为黄色 */

• border-style：分别表示边框的上、右、下、左样式。

  border-style: solid dashed dotted none;
  /* 上边框为实线，右边框为虚线，下边框为点线，左边框没有边框 */

---

3. font

语法规则：

font: [字体样式] [字体变体] [字体粗细] [字体大小]/[行高] [字体家族];

这是一个非常强大的简写属性，可以同时设置多个字体相关的属性：

• 字体样式（normal、italic 等）
• 字体变体（normal、small-caps 等）
• 字体粗细（normal、bold、100 到 900 等）
• 字体大小和行高（16px/1.5 等）
• 字体家族（Arial、"Times New Roman" 等）

font: italic small-caps bold 16px/1.5 "Times New Roman", serif;

等价于：

font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 16px;
line-height: 1.5;
font-family: "Times New Roman", serif;

---

4. background

语法规则：

background: [颜色] [图片] [位置] [大小] [重复方式] [附着方式];

常用于同时设置背景的多个属性：

• 背景颜色（red、#ffffff 等）
• 背景图片（url("image.jpg") 等）
• 背景位置（center、top left 等）
• 背景大小（cover、contain 等）
• 背景重复方式（no-repeat、repeat-x 等）
• 背景附着方式（fixed、scroll 等）

background: red url("image.jpg") center/cover no-repeat fixed;

等价于：

background-color: red;
background-image: url("image.jpg");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;

---

5. list-style

语法规则：

list-style: [类型] [图片] [位置];

用于设置列表项的样式：

• 列表项类型（disc、circle、square、none 等）
• 列表项图片（url("image.jpg") 等）
• 列表项位置（inside、outside 等）

list-style: square url("image.jpg") inside;

等价于：

list-style-type: square;
list-style-image: url("image.jpg");
list-style-position: inside;

---

6. flex

语法规则：

flex: [增长因子] [收缩因子] [基础大小];

用于设置弹性盒子项的弹性行为：

• 增长因子（1 表示可以增长，0 表示不增长）
• 收缩因子（1 表示可以收缩，0 表示不收缩）
• 基础大小（auto、100px 等）

flex: 1 1 auto;

等价于：

flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;

---

7. transition

语法规则：

transition: [属性] [持续时间] [时间函数] [延迟时间];

用于设置过渡效果：

• 属性（all、background-color 等）
• 持续时间（1s、500ms 等）
• 时间函数（ease、linear、ease-in-out 等）
• 延迟时间（0s、200ms 等）

transition: all 0.3s ease-in-out 0.1s;

等价于：

transition-property: all;
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
transition-delay: 0.1s;

---

8. animation

语法规则：

animation: [名称] [持续时间] [时间函数] [延迟时间] [次数] [方向] [填充模式] [状态];

用于设置动画效果：

• 名称（fadeIn、slide 等）
• 持续时间（1s、500ms）
• 时间函数（ease、linear 等）
• 延迟时间（0s、200ms）
• 次数（infinite、2 等）
• 方向（normal、reverse、alternate 等）
• 填充模式（none、forwards、backwards 等）
• 状态（paused、running）

animation: fadeIn 1s ease-in 0.5s infinite alternate both running;

等价于：

animation-name: fadeIn;
animation-duration: 1s;
animation-timing-function: ease-in;
animation-delay: 0.5s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: both;
animation-play-state: running;