1、說一說你平時(shí)寫代碼遵守的編碼規(guī)范

• 語義化
  • 語義化標(biāo)簽優(yōu)先
  • 基于功能命名，基于內(nèi)容命名，基于表現(xiàn)命名
  • 簡略，明了，無后患
• 所有的命名都使用英文小寫
• 命名用引號包裹
• 用中橫線連接
• 命名體現(xiàn)功能，不涉及表現(xiàn)樣式(顏色、字體、邊框、背景)
• 書寫規(guī)范
  • tab 用兩個(gè)空格表示
  • css的: 后加個(gè)空格，{ 前加個(gè)空格
  • 每條聲明后都加上分號
  • 換行，而不是放到一行
  • 顏色用小寫，用縮寫，#fff
  • 小數(shù)不用寫前綴， 0.5s -> .5s; 0 不用加單位
  • 盡量縮寫， margin: 5px 10px 5px 10px -> margin : 5px 10px;

2、垂直居中有幾種實(shí)現(xiàn)方式，給出代碼范例

第一種 上下padding相等

<div class="ct">
    <p>這里是內(nèi)容是內(nèi)容</p>
    <p>這里是內(nèi)容是內(nèi)容</p>
    <p>這里是內(nèi)容是內(nèi)容</p>
    <p>這里是內(nèi)容是內(nèi)容</p>
    <p>這里是內(nèi)容是內(nèi)容</p>
  </div>
-------------------
.ct {
  padding: 40px 0;
  background: #ddd;
  text-align: center;
}

第二種絕對定位

<div class="content">
  </div>
----------
.content {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -150px;
  margin-top: -100px;
  width: 300px;
  height: 200px;
  background: #ddd;
}

第三種 vertical-align 實(shí)現(xiàn)居中，作用在行內(nèi)元素或表格

<div class="box middle">
    ![](http://upload-images.jianshu.io/upload_images/7634882-8c1ff08cc4b1f1dd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  </div>
--------------------
.box {
  width: 300px;
  height: 300px;
  border: 1px solid black;
}
.middle:before {
  content: '';
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}
.middle {
   text-align: center;
}
.box img {
    vertical-align: middle;
}

第四種table-cell 實(shí)現(xiàn)居中

<div class="box">
    ![](http://upload-images.jianshu.io/upload_images/7634882-8c1ff08cc4b1f1dd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  </div>
----------------------
.box {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

第五種flex 居中

<div class="flex">
  <p>content content</p>
</div>
-----------
.flex{
  display:flex;
  width:600px;
  height:600px;
  background-color:#333;
}

.flex p{
  margin:auto;
}

第六種flex 居中

<div class="flex">
  <p>content content</p>
</div>
-----------------------------
.flex{
  display:flex;
  align-items:center;
  justify-content:center;
  width:600px;
  height:600px;
  background-color:#333;
}

3、實(shí)現(xiàn)如下效果，每種效果都只使用一個(gè)html 標(biāo)簽來實(shí)現(xiàn)。

效果
源代碼