淺談編碼規(guī)范

命名技巧

1. 語(yǔ)義化標(biāo)簽優(yōu)先
2. 基于功能命名、基于內(nèi)容命名、基于表現(xiàn)命名
3. 簡(jiǎn)略、明了（翻譯成英文）
4. 所有命名都使用英文小寫
5. 命名用引號(hào)包裹
6. 用中橫線連接

CSS編碼規(guī)范

1. tab 用兩個(gè)空格表示
2. css的 :后加個(gè)空格， {前加個(gè)空格
3. 每條聲明后都加上分號(hào)
4. CSS樣式換行，而不是放到一行
5. 顏色用小寫，用縮寫, #fff
6. 小數(shù)不用寫前綴, 0.5s -> .5s；0不用加單位
7. 盡量縮寫， margin: 5px 10px 5px 10px -> margin: 5px 10px

html編碼規(guī)范

1. 用兩個(gè)空格來(lái)代替制表符（tab）
2. 嵌套元素應(yīng)當(dāng)縮進(jìn)一次（即兩個(gè)空格）。
3. 對(duì)于屬性的定義，確保全部使用雙引號(hào)，絕不要使用單引號(hào)。
   4.不要在自閉合（self-closing）元素的尾部添加斜線
4. 不要省略可選的結(jié)束標(biāo)簽（closing tag）（例如，</li>
   或 </body>）

參考網(wǎng)站：

google html css編碼規(guī)范
bootstrap 編碼規(guī)范
Naming CSS Stuff Is Really Hard

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

1. padding實(shí)現(xiàn) 外圍盒子寬高由內(nèi)部?jī)?nèi)容撐起來(lái)
2. 定位實(shí)現(xiàn)水平垂直絕對(duì)居中 瀏覽器窗口可變，內(nèi)部盒子寬高視內(nèi)容可變
3. line-height等于inline-block盒子高度 實(shí)現(xiàn)垂直居中
4. vertical-align: middle于::before實(shí)現(xiàn)垂直居中 內(nèi)部圖片大小在一定范圍可變即外圍盒子可加載大小可變的圖片
5. display: table cell加上vertical-align:middle實(shí)現(xiàn)垂直居中
   垂直居中1~3
   垂直居中4~5

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

奇異的邊框