饥人谷任务班TASK13

说一说你平时写代码遵守的编码规范

注意，html文件第一行先加<Doctype HTML>

首先，html标签和css样式均用英文小写。
第二，命名用引号包裹。
第三，复合命名尽量用中横线-来连接命名单词。

1. 语义化标签优先：

• 对应文章的能用各个分类的标签尽量用标签。
  例如：如果是图文混排的列表

    <div class="list">
        <ul>
              <li>
                    ![](xxx)
                    <h3>标题</h3>
                    <p>描述</p>
              </li>
        </ul>
  

2. css样式命名：

• 基于内容的命名
  具体模块命名尽量用内容命名。
• 基于表现的命名
  通用调整类标签用表现命名，尽量少用。
• 基于功能的命名
  某些交互功能，如:banner，movie；可用交互功能命名。

3. css规范：

• tab用两个空格表示
• 声明后面加上分号
• 样式换行
• 颜色用小写，尽量用缩写。(疑问：以前在哪处看到过一篇文章：颜色用缩写会降低执行效率，并未测试。)
• 小数点前面尽量不写前缀；0不用加单位。
• 可以合并的样式尽量缩写。如:margin:5px 10px;

垂直居中有几种实现方式，给出代码范例

1. 利用padding添加上下边距

    <div class="demo">内容<br>内容</div>
    .demo{line-height:1.5;padding:20px 0;}
   

2. 绝对定位居中(宽高固定)

    <div class="dialog">
        <h3>对话框标题</h3>
        <p>对话框内容</p>
     </div>
    .dialog{position:absolute; width:100px; height:100px; left:50%;right:50%; margin-left:-50px;margin-top:-50px;}
   

3. 绝对定位居中(宽高不固定) ---注意兼容性问题

    <div class="dialog">
        <h3>对话框标题</h3>
        <p>对话框内容</p>
     </div>
    .dialog{position:absolute; transform:translate(-50%,-50%);}
   

4. 行内元素垂直居中
   vertical-align:middle

5. table-cell实现垂直居中

    <div class="box">内容</div>
    .box{width:100px; height:100px;display:table-cell;vertical:middle;text-align:center;}