编码规范 垂直居中 transform

一.需要遵守的代码规范
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();的特性可以实现以下的功能

效果一
效果二
效果三