写代码遵守的编码规范
1、所有命名都使用英文小写
2、命名用引号包裹
3、每条声明后都加上分号
4、换行，而不是放到一行
5、颜色用小写，用缩写, #fff
6、0不用加单位
7、尽量缩写
参考：链接
垂直居中
- 利用padding垂直居中
<body>
<div class="ct">
<p>我是块级元素哟</p>
<p>我是块级元素哟</p>
</div>
</body>
<style>
.ct {
width: 400px;
background-color: #eee;
text-align:center;
/* 上下padding值相等实现垂直居中 */
padding:40px 0;
}
</style>
- 利用定位居中
<body>
<div class="box"></div>
</body>
<style>
.box {
width: 300px;
height: 300px;
background-color: pink;
position:absolute;
left:50%;
top:50%;
margin-left:-150px;
margin-top:-150px;
}
</style>
- vertical-align：middle居中
<style>
.box {
width: 400px;
height: 300px;
border:1px solid red;
text-align:center;
}
.box:before {
content:'';
display:inline-block;
height: 100%;
vertical-align:middle;
}
.box img {
vertical-align:middle;
background-color: #fff;
}
</style>
<body>
<div class="box"></div>
</body>
<style>
.box {
width: 500px;
background-color: #fff;
display:table-cell;
height: 300px;
vertical-align:middle;
text-align:center;
}
</style>
<div class="box">
<span>我是span</span>
图片
</div>
网友评论