一.需要遵守的代碼規(guī)范
HTML部分
1.語(yǔ)法：tab縮進(jìn)兩格煞抬，標(biāo)簽必須被閉合泌类，能省略'/'的就省略缅刽，屬性用雙引號(hào)读跷，嵌套時(shí)需要縮進(jìn)
2.添加文檔聲明DOCTYPE
3.在html標(biāo)簽內(nèi)通過(guò)lang屬性聲明瀏覽器解析的語(yǔ)言梗搅，有助于翻譯工具進(jìn)行翻譯
4.charset表明字符編碼格式
5.能少用標(biāo)簽就少用標(biāo)簽
CSS部分
1.語(yǔ)法：多個(gè)選擇應(yīng)用同一個(gè)樣式需要用逗號(hào)分開分行顯示，css樣式冒號(hào)后空一格效览，css樣式結(jié)束時(shí)加分號(hào)无切，類名花括號(hào)前要有一個(gè)空格，能縮寫就縮寫（margin丐枉，font...）
2.聲明順序：position>盒模型>排版>視覺（color...）
3.class命名時(shí)多個(gè)單詞中間用-分隔哆键，不要用駝峰法則命名
更多細(xì)節(jié)請(qǐng)點(diǎn)擊→編碼規(guī)范
二.垂直居中
1.vertical-align: middle;
對(duì)圖片垂直居中
對(duì)文本垂直居中
2.絕對(duì)定位實(shí)現(xiàn)垂直居中
負(fù)margin法和transform法
使用負(fù)margin法要知道盒子的寬高，但是可以兼容低版本瀏覽器
使用transform: translate(-50%,-50%);不管寬高怎么變都可以居中瘦锹，但是不兼容低版本瀏覽器
margin: auto法
3.table-cell居中
table-cell居中
把盒子的display屬性改為table-cell籍嘹，優(yōu)點(diǎn)方便，缺點(diǎn)盒子變?yōu)楸砀駥傩?/p>
三.transform:rotate();的應(yīng)用
rotate角度為正時(shí)順時(shí)針旋轉(zhuǎn)弯院，角度為負(fù)時(shí)逆時(shí)針旋轉(zhuǎn)
<pre>
div { //css樣式
height: 200px;
width: 200px;
border: 1px solid;
margin-top: 50px;
margin-left: 50px;
transform: rotate(30deg);
}
</pre>
利用transform:rotate();的特性可以實(shí)現(xiàn)以下的功能
