1、说一说你平时写代码遵守的编码规范
我平时一般遵守如下规范：
1、所有命名都使用英文小写
2、命名用引号包裹
3、每条声明后都加上分号
4、换行，而不是放到一行
5、颜色用小写，用缩写, #fff
6、0不用加单位
7、尽量缩写
2、垂直居中有几种实现方式，给出代码范例
有三种方法：
1、绝对定位：
在块元素上添加绝对定位属性和负margin,如果不是块元素可以转换成inline-block。记得在父元素上添加相对定位属性-如果你不是想在整个html视口垂直居中的话。这种方法比较麻烦，适用于登录弹窗等情况。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vertical align</title>
</head>
<style>
.box{
width: 300px;
height: 200px;
border: 1px solid ;
position:relative;
}
a{
display:inline-block;
position:absolute;
left:50%;
top:50%;
width:100px;
height:30px;
margin: -15px 0 0 -50px;
}
</style>
<body>
<div class="box">
<a href="">我是文字</a>
</div>
</body>
</html>
比如优酷网的这个登录窗，其它区域还有一个透明蒙板效果。
Paste_Image.png
2、使用vertical-align:middle;
使用vertical-align:middle;有两种情况：
一是在父元素上配合table-cell使用，父元素内的所有元素都会整体垂直居中，无论子元素是block元素，还是inline元素。同时配合 text-align: center;inline和inline-block元素还可实现水平居中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<style>
.box{
width: 300px;
height: 200px;
border: 1px solid ;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.box div{
/* display:inline-block; */
width:250px;
height:40px;
border:1px solid ;
line-height:40px;
}
</style>
<body>
<div class="box">
<!--  -->
<div>我是块元素我不受text-align控制</div>
<a href="">我是行内元素</a>
</div>
</body>
</html>
第二种情况是，子元素之间的垂直居中对齐。
如果只有一个对象，想让它在父元素中对齐，可以添加一个空的比较对象
father:before{
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
如果有多个对象，可以给它们都添加vertical-align:middle,从而实现子元素之间的垂直对齐。
另外：给一行内文字设置行高与父元素高相等，可以实现一行文字的垂直居中。
网友评论