1.说一说你平时写代码遵守的编码规范。
HTML 属性应当按照以下给出的顺序依次排列，确保代码的易读性。
class
id, name
data-*
src, for, type, href, value
title, alt
role, aria-*
CSS语法：
- 用两个空格来代替制表符（tab） -- 这是唯一能保证在所有环境下获得一致展现的方法。
- 为选择器分组时，将单独的选择器单独放在一行。
- 为了代码的易读性，在每个声明块的左花括号前添加一个空格。
- 声明块的右花括号应当单独成行。
- 每条声明语句的 : 后应该插入一个空格。
- 为了获得更准确的错误报告，每条声明都应该独占一行。
- 所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的，但是，如果省略这个分号，你的代码可能更易出错。
- 对于以逗号分隔的属性值，每个逗号后面都应该插入一个空格（例如，box-shadow
）。 - 不要在 rgb()、rgba()、hsl()、hsla()或 rect()值的内部的逗号后面插入空格。这样利于从多个属性值（既加逗号也加空格）中区分多个颜色值（只加逗号，不加空格）。
- 对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，.5代替 0.5；-.5px 代替 -0.5px）。
- 十六进制值应该全部小写，例如，#fff。在扫描文档时，小写字符易于分辨，因为他们的形式更易于区分。
- 尽量使用简写形式的十六进制值，例如，用 #fff 代替 #ffffff。
- 为选择器中的属性添加双引号，例如，input[type="text"]。只有在某些情况下是可选的，但是，为了代码的一致性，建议都加上双引号。
- 避免为 0 值指定单位，例如，用 margin: 0; 代替 margin: 0px;。
声明顺序：
相关的属性声明应当归为一组，并按照下面的顺序排列：
Positioning
Box model
Typographic
Visual
2.垂直居中有几种实现方式，给出代码范例
设置padding实现居中：
padding: 40px 0;/*上下padding相等*/
text-align: center;
background: #eee;
}```
绝对定位实现居中：
```.dialog {
position: absolute;
left: 50%;/*父容器的50%*/
top: 50%;
margin-left: -200px;/*为宽度的一半*/
margin-top: -150px;/*为高度的一半*/
width: 400px;
height: 300px;
box-shadow: 0px 0px 3px #000;
}```
```.dialog {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);/*transform属性在低版本浏览器无法使用*/
width: 400px;
height: 300px;
box-shadow: 0px 0px 3px #000;
}```
vertical-align实现居中：
```.box{
width: 300px;
height: 200px;
border: 1px solid ;
text-align: center;
}
.box:before{
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;/*作用于行内元素和表格*/
}
.box img{
vertical-align: middle;
background: blue;
}```
table-cell实现居中:
.box{
width: 300px;
height: 200px;
border: 1px solid ;
display: table-cell;/*改变了dispaly的展现方式*/
vertical-align: middle;
text-align: center;
}
3.实现如下效果，每种效果都只使用一个html 标签来实现。
[](http://js.jirengu.com/judomuyoqa)
