CSS基础——emment语法，有效提高编写速率

在日常的工作中，我们都会往便利、提高速度的方向去编写代码，因此，emmet语法就给予了我们便利。

emment简介

Emmet语法的前身是Zen coding,它使用缩写,来提高html/css的编写速度, Vscode内部已经集成该语法。

快速生成HTML结构语法

• 生成标签名
  直接输入标签名，按 tab 键即可
  

<!-- div -->
    <div></div>

• 生成带有类名的div标签
  方法：先写一个. 紧接着写上类名

<!-- .box -->
    <div class="box"></div>

• 生成带有类名的其他标签
  方法：先写标签名，再写一个. 紧接着写上类名

<!-- p.box -->
    <p class="box"></p>

• 生成带有id名的标签
  方法：先写标签名，紧接着写#和id名（div标签可省略写标签名）

<!-- #two -->
    <div id="two"></div>
<!-- p#one -->
    <p id="one"></p>

• 生成多个相同的标签
  方法：先写上标签名，然后乘以需要生成的数量

<!-- p*3 -->
    <p></p>
    <p></p>
    <p></p>

• 父子级关系的标签
  方法：使用 > （大于号）

<!-- ul>li -->
    <ul>
        <li></li>
    </ul>

• 兄弟关系的标签
  方法：使用 + （加号）

<!-- div+p -->
    <div></div>
    <p></p>

• 生成有顺序的div类名
  方法：使用 $ 自增符号

<!-- .$*3 -->
    <div class="1"></div>
    <div class="2"></div>
    <div class="3"></div>

• 在生成的标签内部写内容
  方法：使用 {}

<!-- ul>li{第$$条项目}*3 -->
    <ul>
        <li>第01条项目</li>
        <li>第02条项目</li>
        <li>第03条项目</li>
     </ul>

快速生成CSS样式语法

CSS 基本采取简写形式即可

比如 w200 按tab 可以 生成 width: 200px;

比如 lh26px 按tab 可以生成 line-height: 26px;

p{
    /* lh */
    line-height: 20px;
}

最后，给大家来个复合型案例

<!-- ul>li[id='item$']{第$$$条数据}*10 -->
    <ul>
        <li id="item1">第001条数据</li>
        <li id="item2">第002条数据</li>
        <li id="item3">第003条数据</li>
        <li id="item4">第004条数据</li>
        <li id="item5">第005条数据</li>
        <li id="item6">第006条数据</li>
        <li id="item7">第007条数据</li>
        <li id="item8">第008条数据</li>
        <li id="item9">第009条数据</li>
        <li id="item10">第010条数据</li>
    </ul>