Emmet 备忘清单

使用 # 添加 ID，使用 . 添加类名。

div#header.container

<div id="header" class="container"></div>

p.class1.class2

<p class="class1 class2"></p>

使用 $ 生成递增数字。

ul>li.item$*3

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
</ul>

h${标题$}*3

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>

1. 属性缩写: 采用属性名或单词的首字母。

   • m → margin
   • bgc → background-color

2. 数值与单位: 数字直接跟在缩写后，单位使用字母简写。

   • m10 → margin: 10px; (px 是默认单位)
   • w50p → width: 50%; (p 代表 %)
   • fz1.5e → font-size: 1.5em; (e 代表 em)
   • lh1.2 → line-height: 1.2; (无单位值)

3. 关键词与多值: 使用 : 连接属性和关键词，使用 - 分隔多个数值。

   • pos:a → position: absolute;
   • d:f → display: flex;
   • p10-20 → padding: 10px 20px;

4. 颜色与特殊符号: 颜色值直接附加在缩写后，! 用于添加 !important。

   • c#3 → color: #333;
   • bd+ → border: 1px solid #000; (+ 用于常用代码段)
   • d:n! → display: none !important;