emmet 写法复习

元素的文本内容和属性的写法

div>p[class="p$"]{非静无以成学，非学无以广才}*4

<div>
    <p class="p1">非静无以成学，非学无以广才</p>
    <p class="p2">非静无以成学，非学无以广才</p>
    <p class="p3">非静无以成学，非学无以广才</p>
    <p class="p4">非静无以成学，非学无以广才</p>
</div>

注：$ 是一个自增符号

兄弟元素的写法: 利用括号分组

section>(div>img+a)+div>h3+p

<section>
    <div>
        <img src="" alt="">
        <a href=""></a>
    </div>
    <div>
        <h3></h3>
        <p></p>
    </div>
</section>

id 和 class 可以进行简写

div#box>p.text

<div id="box">
    <p class="text"></p>
</div>

emmet 提供的 CSS 简写

• 绝对定位：posa == position: absolute;

• 宽高：

  w100 == width: 100px;
  h100 == height: 100px
  w20p == width: 20%;
  
  p 表示%
  e 表示 em
  

• margin，padding 的简写：

  m20-34-69-34 == margin: 20px 34px 69px 34px;
  m20-34 === margin: 20px 34px;  
  
  p100-50 == padding: 100px 50px;
  

• 一次写多条属性

  h100+w300
  
  height: 100px;
  width: 300px;
  

• 颜色值的快速生成

  c#d == color: #dddddd;
  
  ‘#1’ → #111111
  ‘#e0’ → #e0e0e0
  ‘#fc0’ → #ffcc00
  

• 字体定义的格式化

  @f+ == 生成加强版的字体定义样式
  

• 模糊匹配

  ov:h == overflow:hifdden
  

• 前缀写法

  -flex ==
  -webkit-flex: ;
  -moz-flex: ;
  -ms-flex: ;
  -o-flex: ;
  -khtml-flex: ;
  flex: ;
  
  指定前缀：
  
  -wm-tran == 
  -webkit-transform: ;
  -moz-transform: ;
  transform: ;