基本
一般編輯器都支持emmet插件的默终，使用的快捷鍵是Tab
元素
Emmet 沒(méi)有預(yù)定義標(biāo)簽集合扔水，所以可以用任意單詞來(lái)生成對(duì)應(yīng)的標(biāo)簽：
div → <div></div>, foo → <foo></foo>
嵌套操作符
| 說(shuō)明 | 符號(hào) |
|---|---|
| 子元素 | > |
| 兄弟元素 | + |
| 返回上層 | ^ |
| 乘法 | * |
| 分組 | () |
屬性操作符
| 說(shuō)明 | 符號(hào) |
|---|---|
| ID | # |
| 類 | . |
| 自定義屬性 | [name=value] |
| 編號(hào) | $ |
| 降序 | @- |
| 改變起點(diǎn) | @N |
| 文本 | {} |
示例
輸入ul#nav>li.item$*4>a{item $}按下Tab生成
<ul id="nav">
<li class="item1"><a href="">item 1</a></li>
<li class="item2"><a href="">item 2</a></li>
<li class="item3"><a href="">item 3</a></li>
<li class="item4"><a href="">item 4</a></li>
</ul>
假文
輸入p>lorem生成
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum quo esse voluptatibus accusantium dicta. Distinctio, veniam, iste. Nesciunt tenetur ad repellendus ducimus pariatur excepturi, vero at recusandae, adipisci porro error.</p>
可以指定字?jǐn)?shù)赞草，比如輸入p>lorem10生成10 字?jǐn)?shù)的假文
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, facilis.</p>
CSS
寬高
width: ; w
height: ; h
max-width: ; maw
max-height: ; mah
min-width: ; miw
min-height: ; mih
字體
font-size: ; fz
font-weight: ; fw
font-weight: normal; fw:n
font-weight: bold; fw:b
顏色
color: #000; c
color: rgb(0, 0, 0); c:r
color: rgba(0, 0, 0, .5); c:ra
opacity: ; op
背景
background-color: #fff; bgc
邊線
border: ; bd
border: 1px solid #000; bd+
border: none; bd:n
border-top: ; bt
border-bottom: ; bb
border-left: ; bl
border-right: ; br
文本
text-align: left; ta
text-align: center; ta:c
text-align: left; ta:l
text-align: right; ta:r
text-align: justify; ta:j
text-indent: ; ti
vertical-align: middle; va:m
內(nèi)外間距
margin: ; m
margin: auto; m:a
margin-top: ; mt
margin-bottom: ; mb
margin-left: ; ml
margin-right: ; mr
padding: ; p
padding-top: ; pt
padding-bottom: ; pb
padding-left: ; pl
padding-right: ; pr
定位
position: relative; pos
position: absolute; pos:a
position: relative; pos:r
position: fixed; pos:f
top: ; t
bottom: ; b
left: ; l
right: ; r
z-index: ; z
float: left; fl
float: none; fl:n
float: left; fl:l
float: right; fl:r
clear: both; cl
clear: none; cl:n
clear: left; cl:l
clear: right; cl:r
clear: both; cl:b
display: block; d
display: none; d:n
display: block; d:b
display: inline; d:i
display: inline-block; d:ib
overflow: hidden; oh
