Emmet语法

基本

一般编辑器都支持emmet插件的，使用的快捷键是Tab

元素

Emmet 没有预定义标签集合，所以可以用任意单词来生成对应的标签：

div → <div></div>, foo → <foo></foo>

嵌套操作符

说明	符号
子元素	>
兄弟元素	+
返回上层	^
乘法	*
分组	()

属性操作符

说明	符号
ID	#
类	.
自定义属性	[name=value]
编号	$
降序	@-
改变起点	@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>

可以指定字数，比如输入p>lorem10生成10 字数的假文

<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

内外间距

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

参考

Emmet 中文文档
Emmet cheatsheet

网站导航

网站导航