1.說一說你平時寫代碼遵守的編碼規(guī)范
HTML篇
- ** 用兩個空格來代替制表符（tab） **
這是唯一能保證在所有環(huán)境下獲得一致展現(xiàn)的方法涧衙。
嵌套元素應(yīng)當(dāng)縮進(jìn)一次（即兩個空格）。
對于屬性的定義，確保全部使用雙引號序攘，絕不要使用單引號。
不要在自閉合元素的尾部添加斜線,不要省略可選的結(jié)束標(biāo)簽（例如瞄沙，</li> 或 </body>）申尼。
- 屬性順序
HTML 屬性應(yīng)當(dāng)按照以下給出的順序依次排列，確保代碼的易讀性。
class
id, name
data-*
src, for, type, href, value
title, alt
role, aria-*
class 用于標(biāo)識高度可復(fù)用組件蒙挑，因此應(yīng)該排在首位。id 用于標(biāo)識具體組件，應(yīng)當(dāng)謹(jǐn)慎使用（例如欣鳖，頁面內(nèi)的書簽），因此排在第二位。
- 減少標(biāo)簽的數(shù)量
編寫 HTML 代碼時蜕依，盡量避免多余的父元素。很多時候吹缔，這需要迭代和重構(gòu)來實現(xiàn)。請看下面的案例：
CSS篇
語法
用兩個空格來代替制表符（tab） -- 這是唯一能保證在所有環(huán)境下獲得一致展現(xiàn)的方法。
為選擇器分組時，將單獨的選擇器單獨放在一行糕簿。
為了代碼的易讀性，在每個聲明塊的左花括號前添加一個空格殃恒。
聲明塊的右花括號應(yīng)當(dāng)單獨成行。
每條聲明語句的 : 后應(yīng)該插入一個空格。
為了獲得更準(zhǔn)確的錯誤報告，每條聲明都應(yīng)該獨占一行。
所有聲明語句都應(yīng)當(dāng)以分號結(jié)尾。最后一條聲明語句后面的分號是可選的啊送，但是，如果省略這個分號勾怒，你的代碼可能更易出錯段只。
注釋
代碼是由人編寫并維護(hù)的。請確保你的代碼能夠自描述鉴扫、注釋良好并且易于他人理解赞枕。好的代碼注釋能夠傳達(dá)上下文關(guān)系和代碼目的。不要簡單地重申組件或 class 名稱坪创。
對于較長的注釋炕婶，務(wù)必書寫完整的句子；對于一般性注解莱预，可以書寫簡潔的短語柠掂。
class 命名
class 名稱中只能出現(xiàn)小寫字符和破折號（dashe）（不是下劃線，也不是駝峰命名法）锁施。破折號應(yīng)當(dāng)用于相關(guān) class 的命名（類似于命名空間）（例如陪踩，.btn 和 .btn-danger）。
避免過度任意的簡寫悉抵。.btn 代表 button肩狂，但是 .s 不能表達(dá)任何意思。class 名稱應(yīng)當(dāng)盡可能短姥饰，并且意義明確傻谁。
編輯器配置
將你的編輯器按照下面的配置進(jìn)行設(shè)置，以避免常見的代碼不一致和差異：
用兩個空格代替制表符（soft-tab 即用空格代表 tab 符）列粪。
保存文件時审磁，刪除尾部的空白符。
設(shè)置文件編碼為 UTF-8岂座。
在文件結(jié)尾添加一個空白行态蒂。
2.垂直居中有幾種實現(xiàn)方式，給出代碼范例
絕對定位實現(xiàn)居中
原理:設(shè)置盒模型的絕對定位,left:-50%,top:50%;
設(shè)置margin-top:-(盒模型高度一半),margin-left:-(盒模型高度一半)
.wrap:before{
content:'';
display:inline-block;
height:100%;
vertical-align :middle;
}
重點:
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搭配.
