1. 編碼規范
- 命名規范
- 命名時遵從語義化原則
- 語義化標簽優先
- 基于功能命名、基于內容命名
- 命名盡量簡略、明了
- 命名時需要養成良好習慣
- 所有命名都使用英文小寫
- 命名用引號包裹
- 命名時不是一個既有單詞用中橫線連接
- 命名盡量體現出元素的功能，不涉及到表現樣式
- 借鑒根據業界經驗總結得出的常見命名
-
CSS規范
- tab用兩個空格表示（不是四個空格）
- CSS的
:后面加個空格，{前面加個空格 - 每條聲明都加上分號
- 換行，而不是放到一行，這樣方便查看和修改
- 顏色用小寫，盡量用縮寫，比如白色
#ffffff應該寫成fff - 小數不用前綴，比如
0.5s應該寫成.5s，且0不用加單位 - 盡量縮寫：比如
padding: 10px 20px 10px 20px;應該寫成padding: 10px 20px; - 遵循PBTV原則：A. Positioning（位置相關）B. Box Model（盒模型）C. Typographic（文字相關）D. Visual（視覺相關）
總結
命名的確挺難，想出一個合適的名字有挑戰性，我認為應該記住或者熟悉一些通用的常見命名，然后努力要求自己遵守以上規范，最好是寫完代碼后認真檢查，長久以來就可以形成自己的習慣和手感，以后的代碼在這樣的嚴格要求下會有更強的可讀性、也便于修改維護，更加方便團隊協作，讓大家一起寫的代碼看起來像一個人寫的一樣。
2. 垂直居中的實現方式
- 方法1：設置上下padding相等
設置上下padding相等
適用場景：外層容器不設定高度，其高度被內部的內容自動撐開
- 方法2：絕對定位，搭配
margin-left與margin-top，其值分別為負的width/2，負的height/2
絕對定位加margin
適用場景：外層容器寬高固定，尤其適合于“彈窗”效果
- 方法3：使用vertical-align
vertical-align: middle
原理：由于vertical-align定義行內元素的基線相對于該元素所在行的基線的垂直對齊，因此可以在固定寬高的父容器之前加上一個內容為空的inline-block，讓它寬度與父容器寬度保持一致，這樣目標元素的基線就能相對這個inline-block基線垂直對齊。
- 方法4：使用display: table-cell
display: table-cell
原理：display:table-cell屬性指讓標簽元素以表格單元格的形式呈現，類似于td標簽。但是存在兼容性問題，IE6&7不支持這一屬性。
