Emmet(前身是Zen Coding)是前端开发快速输入代码一种方式，它可以极大的提高代码编写的效率，它提供了一种非常简练的语法规则，然后立刻生成对应的 HTML 结构或者 CSS 代码，同时还有多种实用的功能帮助进行前端开发。用和 CSS 选择器相似的语法来描述元素的嵌套层级关系和属性，实现 HTML/XML/CSS 等代码的智能自动补全。
CSS常用语法
常用基本css语法1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22/* por */ { position: relative }
/* psa */ { position: absolute }
/* psf */ { position: fixed }
/* pss */ { position: static }
/* fll */ { float: left }
/* flr */ { float: right }
/* cl */ { clear: both }
/* di */ { display: inline }
/* db */ { display: block }
/* dib */ { display: inline-block }
/* df */ { display: flex }
/* ov */ { overflow: hidden }
/* ov:s */ { overflow: scroll }
/* ova */ { overflow: auto }
/* mt */ { margin-top: 10px }
/* mb */ { margin-right: 10px }
/* mr */ { margin-bottom: 10px }
/* ml */ { margin-left: 10px }
/* pt */ { padding-top: 10px }
/* pb */ { padding-right: 10px }
/* pr */ { padding-bottom: 10px }
/* pl */ { padding-left: 10px }border和background常用语法1
2
3
4
5
6
7
8
9
10
11
12/* bd */ { border: 1px solid #000 }
/* bdcl */ { border-collapse: collapse }
/* bdt */ { border-top: 1px solid #000 }
/* bdb */ { border-bottom: 1px solid #000 }
/* bdl */ { border-left: 1px solid #000 }
/* bdr */ { border-right: 1px solid #000 }
/* bdrs */ { border-radius: 10px }
/* bgs */ { background-size: contain }
/* bgc */ { background-color: #fff }
/* bgp */ { background-position: 0 0 }
/* bgi */ { background-image: url() }
/* bgr */ { background-repeat: no-repeat }text文字类语法1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17/* fw */ { font-weight: normal }
/* fsn */ { font-style: normal }
/* fz */ { font-size: 10px }
/* ff */ { font-family: serif }
/* va */ { vertical-align: top }
/* ta */ { text-align: left }
/* tac */ { text-align: center }
/* tar */ { text-align: right }
/* taj */ { text-align: justify }
/* td */ { text-decoration: none }
/* ti */ { text-indent: 2em }
/* ts */ { text-shadow: hoff voff blur #000 }
/* lh */ { line-height: 10px }
/* ls */ { letter-spacing: normal }
/* whs */ { white-space: nowrap }
/* wb */ { word-break: normal }
/* ws */ { word-spacing: 10px }其他常用语法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34/* bxz */ { box-sizing: border-box }
/* bxsh */ { box-shadow: inset hoff voff blur #000 }
/* w10 */ { width: 10px }
/* h10 */ { height: 10px }
/* w100p */ { width: 100% }
/* cr */ { cursor: pointer }
/* c */ { color: #fff }
/* ol */ { outline: none }
/* lis */ { list-style: none; }
/* op */ { opacity: 1 }
/* op */ { opacity: 1 }
/* ! */ { display: none ;}
/* anm */ { animation: name duration timing-function delay iteration-count direction fill-mode }
/* trfr */ { transform: rotate(angle) }
/* trf */ { transform: '' }
/* trft */ { transform: translate(x, y) }
/* trfo */ { transform-origin: 0 }
/* trs */ { transition: prop time }
/* @kf */ @keyframes
/* lg */ { background-image: linear-gradient() }
/* 单位: p->% e->em r->rem x->ex */
{
/* w100 */ width: 100px; /* 数值默认单位px */
/* w100p */ width: 100%;
/* w100e */ width: 100em;
/* w100x */ width: 100ex;
}
/* 色值: #6->#666666 #fc->#fcfcfc #fc0->#ffcc00 */
{
/* c#6 */ color: #666666;
/* c#fc */ color: #fcfcfc;
/* c#fc0 */ color: #ffcc00;
}
/* 多个值 m10p-20r-30e-40x */ { margin: 10% -20rem -30em -40ex; }