一.需要遵守的代碼規范
HTML部分
1.語法：tab縮進兩格，標簽必須被閉合，能省略'/'的就省略，屬性用雙引號，嵌套時需要縮進
2.添加文檔聲明DOCTYPE
3.在html標簽內通過lang屬性聲明瀏覽器解析的語言，有助于翻譯工具進行翻譯
4.charset表明字符編碼格式
5.能少用標簽就少用標簽

CSS部分
1.語法：多個選擇應用同一個樣式需要用逗號分開分行顯示，css樣式冒號后空一格，css樣式結束時加分號，類名花括號前要有一個空格，能縮寫就縮寫（margin，font...）
2.聲明順序：position>盒模型>排版>視覺（color...）
3.class命名時多個單詞中間用-分隔，不要用駝峰法則命名

更多細節請點擊→編碼規范

二.垂直居中
1.vertical-align: middle;
對圖片垂直居中
對文本垂直居中

2.絕對定位實現垂直居中
負margin法和transform法
使用負margin法要知道盒子的寬高，但是可以兼容低版本瀏覽器
使用transform: translate(-50%,-50%);不管寬高怎么變都可以居中，但是不兼容低版本瀏覽器
margin: auto法

3.table-cell居中
table-cell居中
把盒子的display屬性改為table-cell，優點方便，缺點盒子變為表格屬性

三.transform:rotate();的應用
rotate角度為正時順時針旋轉，角度為負時逆時針旋轉
<pre>
div { //css樣式
height: 200px;
width: 200px;
border: 1px solid;
margin-top: 50px;
margin-left: 50px;
transform: rotate(30deg);
}
</pre>

效果圖

利用transform:rotate();的特性可以實現以下的功能

效果一
效果二
效果三