# CSS Emmet写法指南：新手也能秒懂的高效样式代码技巧 前面我们聊完了HTML部分的Emmet写法，接下来重点说说**CSS的Emmet写法**——它同样能帮你省去敲重复属性的力气，尤其是写样式时经常要重复输入的`margin`、`padding`、`color`等属性，用Emmet几秒钟就能搞定。 CSS的Emmet语法和HTML不太一样，它更像是一套「属性缩写规则」，掌握几个核心逻辑后，写样式会变得像「填表」一样简单。 --- ## 一、CSS Emmet的核心逻辑：属性缩写+值简写 CSS Emmet的本质是：**通过简写属性名+简写值，快速生成完整的CSS声明（即`属性: 值;`）**。比如你想写`margin: 10px;`，用Emmet可能只需要输入`m10`；想写`background-color: #fff;`，可能只需要输入`bgc#fff`。 它的规则可以拆解为： **「简写属性名」 + 「简写值（可选）」 → 按Tab键 → 生成完整的`属性: 值;`声明** --- ## 二、常用CSS属性的Emmet缩写对照表（小白必存） 下面按功能分类整理了最常用的CSS属性及其Emmet缩写，搭配例子更容易理解： ### 1. 盒模型相关（margin/padding/width/height） 这些是布局时最常写的属性，Emmet的缩写直接取属性首字母，值支持数字（默认单位px）或带单位的数值。 | 你需要写的CSS | Emmet缩写 | 输入后生成的结果 | 说明 | |-----------------------|-----------|-------------------------------|----------------------------------------------------------------------| | `margin: 10px;` | `m10` | `margin: 10px;` | `m`=margin，默认单位px | | `margin: 20px 15px;` | `m20 15` | `margin: 20px 15px;` | 多个值按顺序对应（上 右 下 左 / 上下 左右 等） | | `padding: 15px;` | `p15` | `padding: 15px;` | `p`=padding | | `width: 300px;` | `w300` | `width: 300px;` | `w`=width | | `height: 200px;` | `h200` | `height: 200px;` | `h`=height | | `margin: 10px 20px 5px 15px;` | `m10 20 5 15` | 对应四方向值 | 顺序：上→右→下→左 | > 单位简写：如果不写单位，默认是`px`；如果想用其他单位（比如`em`、`rem`），直接在数字后加单位，例如`m1.5em` → `margin: 1.5em;`。 --- ### 2. 颜色相关（background/color/border-color） 颜色是样式中高频出现的属性，Emmet支持十六进制、RGB、颜色关键词等多种简写。 | 你需要写的CSS | Emmet缩写 | 输入后生成的结果 | 说明 | |----------------------------|-----------------|--------------------------------------|----------------------------------------------------------------------| | `background-color: #ffffff;` | `bgc#fff` | `background-color: #fff;` | `bgc`=`background-color`，`#fff`是白色的十六进制简写（等价于`#ffffff`） | | `background: #f0f0f0;` | `bg#f0f0f0` | `background: #f0f0f0;` | `bg`=`background`（简写背景色，不区分是否带透明度） | | `color: red;` | `cred` | `color: red;` | `c`=`color`，`red`是颜色关键词（也支持`blue`、`green`等） | | `color: #333333;` | `c#333` | `color: #333;` | 十六进制颜色简写（3位或6位均可） | | `border-color: #000;` | `bc#000` | `border-color: #000;` | `bc`=`border-color` | > 常用颜色关键词：`red`（红）、`blue`（蓝）、`green`（绿）、`black`（黑）、`white`（白）、`yellow`（黄）等，直接写英文即可。 --- ### 3. 字体与文本（font-size/font-weight/text-align） 排版相关的属性（比如文字大小、粗细、对齐方式）也有一套简洁的缩写。 | 你需要写的CSS | Emmet缩写 | 输入后生成的结果 | 说明 | |----------------------------|-----------------|--------------------------------------|----------------------------------------------------------------------| | `font-size: 16px;` | `fs16` | `font-size: 16px;` | `fs`=`font-size`，默认单位px | | `font-weight: bold;` | `fwbold` | `font-weight: bold;` | `fw`=`font-weight`，`bold`是固定值（也可写`700`） | | `text-align: center;` | `ta-c` | `text-align: center;` | `ta`=`text-align`，`c`=`center`（其他值如`l`=left，`r`=right） | | `text-align: left;` | `ta-l` | `text-align: left;` | `l`=`left` | | `text-align: right;` | `ta-r` | `text-align: right;` | `r`=`right` | | `line-height: 1.5;` | `lh1.5` | `line-height: 1.5;` | `lh`=`line-height`，默认无单位（可写`1.5`或`24px`） | > 对齐值简写：`ta-c`（居中）、`ta-l`（左对齐）、`ta-r`（右对齐）；字体粗细：`fw400`（正常）、`fw700`（加粗，等同于`bold`）。 --- ### 4. 边框与圆角（border/border-radius） 边框和圆角是常见的装饰属性，Emmet的缩写也很直观。 | 你需要写的CSS | Emmet缩写 | 输入后生成的结果 | 说明 | |----------------------------|-----------------|--------------------------------------|----------------------------------------------------------------------| | `border: 1px solid #ccc;` | `bd1s#ccc` | `border: 1px solid #ccc;` | `bd`=`border`，`1`=宽度，`s`=`solid`（实线），`#ccc`=颜色 | | `border-radius: 5px;` | `br5` | `border-radius: 5px;` | `br`=`border-radius`，默认单位px | | `border-top: 2px dashed #999;` | `bdt2d#999` | `border-top: 2px dashed #999;` | `bdt`=`border-top`，`2`=宽度，`d`=`dashed`（虚线），`#999`=颜色 | > 边框样式简写：`s`=`solid`（实线）、`d`=`dashed`（虚线）、`dot`=`dotted`（点线）；边框方位：`bdt`（上）、`bdr`（右）、`bdb`（下）、`bdl`（左）。 --- ### 5. 布局相关（display/position/flex） 现代布局中，`display`、`position`、`flex`等属性高频出现，Emmet提供了对应的缩写。 | 你需要写的CSS | Emmet缩写 | 输入后生成的结果 | 说明 | |----------------------------|-----------------|--------------------------------------|----------------------------------------------------------------------| | `display: flex;` | `df` | `display: flex;` | `df`=`display: flex;` | | `display: block;` | `db` | `display: block;` | `db`=`display: block;` | | `display: none;` | `dn` | `display: none;` | `dn`=`display: none;` | | `position: relative;` | `pr` | `position: relative;` | `pr`=`position: relative;` | | `position: absolute;` | `pa` | `position: absolute;` | `pa`=`position: absolute;` | | `flex-direction: row;` | `fd-r` | `flex-direction: row;` | `fd`=`flex-direction`，`r`=`row`（也可写`c`=column） | | `justify-content: center;` | `jc-c` | `justify-content: center;` | `jc`=`justify-content`，`c`=`center` | | `align-items: center;` | `ai-c` | `align-items: center;` | `ai`=`align-items`，`c`=`center` | > 常用布局值：`df`（flex布局）、`db`（块级）、`dn`（隐藏）；`pr`（相对定位）、`pa`（绝对定位）；`fd-r`（横向排列）、`fd-c`（纵向排列）；`jc-c`（主轴居中）、`ai-c`（交叉轴居中）。 --- ## 三、CSS Emmet的使用方法（实操步骤） CSS Emmet通常用在**CSS文件或