平时写代码遵守的编码规范
1. tab用两个空格表示；
2. ：后加一个空格，{前加一个空格；
3. 每条声明后都要加上分号；
4. 换行,而不是全都放到一行
5. 颜色用小写，用缩写；
6. 小数不用写前缀，0.5->.5，0后不需要加单位;
7. 尽量缩写，margin: 5px 10px 5px 10px;->margin: 5px 10px;
垂直居中有几种实现方式，给出代码范例
- 绝对定位实现垂直居中
<head>
<style>
html,body {
height: 100%;
}
.dialog {
position: absolute;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -150px;
width: 400px;
height: 300px;
box-shadow: 0px 0px 3px #000;
}
.dialog .header{
padding: 10px;
background: #000;
color: #fff;
}
.dialog .content{
padding: 10px;
}
</style>
</head>
<body>
<div class="dialog">
<div class="header">我是标题</div>
<div class="content">我是内容</div>
</div>
</body>
- vertical align实现垂直居中
<head>
<style>
.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;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
- table cell实现垂直居中
<head>
<style>
.box{
width: 300px;
height: 200px;
border: 1px solid ;
display: table-cell;
vertical-align: middle;
text-align: center;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
