盒子
盒子
文章目录󰁋
  1. 基本语法
  2. HTML
  3. CSS
    1. visual formating
    2. Margin & Padding
    3. Font
    4. Background
    5. Color
    6. 其他

Emmet常用快捷键

基本语法


  • div+div>p>span+em^bq

    1
    2
    3
    4
    5
    <div></div>
    <div>
    <p><span></span><em></em></p>
    <blockquote></blockquote>
    </div>
  • div+div>p>span+em^^bq

1
2
3
4
5
<div></div>
<div>
<p><span></span><em></em></p>
</div>
<blockquote></blockquote>
  • div>(header>ul>li*2>a)+footer>p
1
2
3
4
5
6
7
8
9
10
11
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>
  • (div>dl>(dt+dd)*3)+footer>p
1
2
3
4
5
6
7
8
9
10
11
12
13
<div>
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
</div>
<footer>
<p></p>
</footer>
  • ul>li.item$*5
1
2
3
4
5
6
7
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>
  • h$[title=item$]{Header $}*3
1
2
3
<h1 title="item1">Header 1</h1>
<h2 title="item2">Header 2</h2>
<h3 title="item3">Header 3</h3>
  • ul>li.item$$$*5
1
2
3
4
5
6
7
<ul>
<li class="item001"></li>
<li class="item002"></li>
<li class="item003"></li>
<li class="item004"></li>
<li class="item005"></li>
</ul>
  • ul>li.item$@-*5
1
2
3
4
5
6
7
<ul>
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
<li class="item2"></li>
<li class="item1"></li>
</ul>
  • ul>li.item$@3*5
1
2
3
4
5
6
7
<ul>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
<li class="item6"></li>
<li class="item7"></li>
</ul>
  • form#search.wide
1
<form id="search" class="wide"></form>
  • p.class1.class2.class3
1
<p class="class1 class2 class3"></p>
  • td[rowspan=2 colspan=3 title]
1
<td rowspan="2" colspan="3" title=""></td>

HTML


  • !
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>

</body>
</html>
  • a:link
1
<a href="http://"></a>
  • a:mail
1
<a href="mailto:"></a>
  • link:css
1
<link rel="stylesheet" href="style.css" />
  • link:favicon
1
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
  • link:rss
1
<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml" />
  • meta:utf
1
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  • script:src
1
<script src=""></script>
  • form:get
1
<form action="" method="get"></form>

  • input:hidden,input:h
1
<input type="hidden" name="" />
  • input:text, input:t
  • input:password, input:p
  • input:checkbox, input:c
  • input:radio,input:r
  • input:file, input:f
  • input:submit, input:s
  • input:image,input:i
  • input:button, input:b

  • option, opt
1
<option value=""></option>
  • button:disabled,button:d, btn:d
1
<button disabled="disabled"></button>
  • ifr
1
<iframe src="" frameborder="0"></iframe>
  • btn
1
<button></button>
  • ul+
1
2
3
<ul>
<li></li>
</ul>
  • dl+
1
2
3
4
5
<dl>
<dt></dt>
<dd></dd>
</dl>
`
  • table+
1
2
3
4
5
<table>
<tr>
<td></td>
</tr>
</table>
  • tr+
1
2
3
<tr>
<td></td>
</tr>
  • select+
1
2
3
<select name="" id="">
<option value=""></option>
</select>
  • c
1
<!-- -->
  • cc:ie6
1
2
3
<!--[if lte IE 6]>
${child}
<![endif]-->

CSS

visual formating


  • pos:s

    1
    position:static;
  • pos:a

    1
    position:absolute;
  • pos:r

    1
    position:relative;
  • pos:f

    1
    position:fixed;
  • t

    1
    top:;
  • b:a

    1
    bottom:auto;
  • l

    1
    left:;
  • l:a

    1
    left:auto;
  • z

    1
    z-index:;
  • z:a

    1
    z-index:auto;
  • fl

    1
    float:left;
  • fl:n

    1
    float:none;
  • fl:l

    1
    float:left;
  • fl:r

    1
    float:right;
  • cl

    1
    clear:both;
  • cl:n

    1
    clear:none;
  • cl:l

    1
    clear:left;
  • cl:r

    1
    clear:right;
  • cl:b

    1
    clear:both;
  • d

    1
    display:block;
  • d:n

    1
    display:none;
  • d:b

    1
    display:block;
  • d:i

    1
    display:inline;
  • d:ib

    1
    display:inline-block;
  • d:itb

    1
    display:inline-table;
  • d:tbc

    1
    display:table-cell;
  • v

    1
    visibility:hidden;
  • v:v

    1
    visibility:visible;
  • v:h

    1
    visibility:hidden;
  • ov

    1
    overflow:hidden;
  • ov:v

    1
    overflow:visible;
  • ov:h

    1
    overflow:hidden;
  • ov:s

    1
    overflow:scroll;
  • zoo, zm

    1
    zoom:1;
  • cur:d

    1
    cursor:default;
  • cur:ha

    1
    cursor:hand;
  • cur:p

    1
    cursor:pointer;

Margin & Padding


  • m:a

    1
    margin:auto;
  • mt

    1
    margin-top:;
  • mt:a

    1
    margin-top:auto;
  • mr

    1
    margin-right:;
  • mr:a

    1
    margin-right:auto;
  • mb

    1
    margin-bottom:;
  • mb:a

    1
    margin-bottom:auto;
  • ml

    1
    margin-left:;
  • ml:a

    1
    margin-left:auto;
  • pt

    1
    padding-top:;
  • pr

    1
    padding-right:;
  • pb

    1
    padding-bottom:;
  • pl

    1
    padding-left:;

Font

  • fw

    1
    font-weight:;
  • fw:n

    1
    font-weight:normal;
  • fw:b

    1
    font-weight:bold;
  • fw:br

    1
    font-weight:bolder;
  • fw:lr

    1
    font-weight:lighter;
  • fs

    1
    font-style:${italic};
  • fs:n

    1
    font-style:normal;
  • fz

    1
    font-size:;
  • ff

    1
    font-family:;
  • ff:s

    1
    font-family:serif;
  • ff:ss

    1
    font-family:sans-serif;
  • ff:m

    1
    font-family:monospace;
  • ff:a

    1
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  • ff:t

    1
    font-family: "Times New Roman", Times, Baskerville, Georgia, serif;
  • ff:v

    1
    font-family: Verdana, Geneva, sans-serif;

Background

  • bg

    1
    background:#000;
  • bg+

    1
    background:#fff url() 0 0 no-repeat;
  • bg:n

    1
    background:none;
  • bgc

    1
    background-color:#fff;
  • bgc:t

    1
    background-color:transparent;
  • bgi

    1
    background-image:url();
  • bgi:n

    1
    background-image:none;
  • bgr

    1
    background-repeat:;
  • bgr:n

    1
    background-repeat:no-repeat;
  • bgr:x

    1
    background-repeat:repeat-x;
  • bgr:y

    1
    background-repeat:repeat-y;
  • bgr:sp

    1
    background-repeat:space;
  • bgr:rd

    1
    background-repeat:round;
  • bga

    1
    background-attachment:;
  • bga:f

    1
    background-attachment:fixed;
  • bga:s

    1
    background-attachment:scroll;
  • bgp

    1
    background-position:0 0;
  • bgpx

    1
    background-position-x:;
  • bgpy

    1
    background-position-y:;
  • bgbk

    1
    background-break:;
  • bgbk:bb

    1
    background-break:bounding-box;
  • bgbk:eb

    1
    background-break:each-box;
  • bgbk:c

    1
    background-break:continuous;
  • bgcp

    1
    background-clip:padding-box;
  • bgcp:bb

    1
    background-clip:border-box;
  • bgcp:pb

    1
    background-clip:padding-box;
  • bgcp:cb

    1
    background-clip:content-box;
  • bgcp:nc

    1
    background-clip:no-clip;
  • bgo

    1
    background-origin:;
  • bgo:pb

    1
    background-origin:padding-box;
  • bgo:bb

    1
    background-origin:border-box;
  • bgo:cb

    1
    background-origin:content-box;
  • bgsz

    1
    background-size:;
  • bgsz:a

    1
    background-size:auto;
  • bgsz:ct

    1
    background-size:contain;
  • bgsz:cv

    1
    background-size:cover;

Color


  • c

    1
    color:#000;
  • c:r

    1
    color:rgb(0, 0, 0);
  • c:ra

    1
    color:rgba(0, 0, 0, .5);
  • op

    1
    opacity:;

其他


  • ·@m·, @media·
1
2
3
@media screen {

}
  • @i, @import
1
@import url();
  • @kf
1
2
3
4
@keyframes identifier {
from { }
to { }
}
  • @f+
1
2
3
4
5
6
7
8
9
10
@font-face {
font-family: 'FontName';
src: url('FileName.eot');
src: url('FileName.eot?#iefix') format('embedded-opentype'),
url('FileName.woff') format('woff'),
url('FileName.ttf') format('truetype'),
url('FileName.svg#FontName') format('svg');
font-style: normal;
font-weight: normal;
}
  • @f
1
2
3
4
font-face {
font-family:;
src:url(|);
}
  • !
1
!important
支持一下
扫一扫,支持poetries