1.說一說你平時寫代碼遵守的編碼規范

HTML篇

• ** 用兩個空格來代替制表符（tab） **

這是唯一能保證在所有環境下獲得一致展現的方法。
嵌套元素應當縮進一次（即兩個空格）。
對于屬性的定義，確保全部使用雙引號，絕不要使用單引號。
不要在自閉合元素的尾部添加斜線,不要省略可選的結束標簽（例如，</li> 或 </body>）。

• 屬性順序

HTML 屬性應當按照以下給出的順序依次排列，確保代碼的易讀性。

class
id, name
data-*
src, for, type, href, value
title, alt
role, aria-*
class 用于標識高度可復用組件，因此應該排在首位。id 用于標識具體組件，應當謹慎使用（例如，頁面內的書簽），因此排在第二位。

• 減少標簽的數量
  編寫 HTML 代碼時，盡量避免多余的父元素。很多時候，這需要迭代和重構來實現。請看下面的案例：

CSS篇

語法
用兩個空格來代替制表符（tab） -- 這是唯一能保證在所有環境下獲得一致展現的方法。
為選擇器分組時，將單獨的選擇器單獨放在一行。
為了代碼的易讀性，在每個聲明塊的左花括號前添加一個空格。
聲明塊的右花括號應當單獨成行。
每條聲明語句的 : 后應該插入一個空格。
為了獲得更準確的錯誤報告，每條聲明都應該獨占一行。
所有聲明語句都應當以分號結尾。最后一條聲明語句后面的分號是可選的，但是，如果省略這個分號，你的代碼可能更易出錯。

注釋
代碼是由人編寫并維護的。請確保你的代碼能夠自描述、注釋良好并且易于他人理解。好的代碼注釋能夠傳達上下文關系和代碼目的。不要簡單地重申組件或 class 名稱。
對于較長的注釋，務必書寫完整的句子；對于一般性注解，可以書寫簡潔的短語。

class 命名
class 名稱中只能出現小寫字符和破折號（dashe）（不是下劃線，也不是駝峰命名法）。破折號應當用于相關 class 的命名（類似于命名空間）（例如，.btn 和 .btn-danger）。
避免過度任意的簡寫。.btn 代表 button，但是 .s 不能表達任何意思。class 名稱應當盡可能短，并且意義明確。

編輯器配置
將你的編輯器按照下面的配置進行設置，以避免常見的代碼不一致和差異：
用兩個空格代替制表符（soft-tab 即用空格代表 tab 符）。
保存文件時，刪除尾部的空白符。
設置文件編碼為 UTF-8。
在文件結尾添加一個空白行。

參考

2.垂直居中有幾種實現方式，給出代碼范例

• 行內元素文本居中

• 絕對定位實現居中
  原理:設置盒模型的絕對定位,left:-50%,top:50%;
  設置margin-top:-(盒模型高度一半),margin-left:-(盒模型高度一半)

• vertical-align實現居中
  原理:

.wrap:before{
  content:'';
  display:inline-block;
  height:100%;
  vertical-align :middle;
}

• table-cell實現居中

重點:
text-align:center;
  display:table-cell;
  vertical-align:middle;

3.

利用邊框做尖角的練習

實心半三角
.box2 {
  position: relative;
  margin-top: 30px;
  border: 1px solid #ccc; 
  width: 250px;
  height: 100px;
}

.box2:before {
  content: '';
  position: absolute;
  border: 10px solid transparent;
  border-top: 10px solid green;
  border-right: 10px solid red;
  right: -1px;
  top: -1px;
}


空心金字塔行的三角
.box3 {
  position: relative;
  margin-top:30px;
  border:1px solid #ccc;
  height:100px;
  width:250px;
}
.box3:before {
  content: '';
  position: absolute;
  top:-9px;
  left:15px;
  transform:rotateZ(45deg);
  
  border-left: 1px solid #ccc;
  border-top: 1px solid #ccc;
  width: 15px;
  height: 15px;
  background: #fff;
}

偽元素**必須**和content搭配.