用两个空格来代替制表符（tab） -- 这是唯一能保证在所有环境下获得一致展现的方法。
嵌套元素应当缩进一次（即两个空格）。
对于属性的定义，确保全部使用双引号，绝不要使用单引号。
不要在自闭合（self-closing）元素的尾部添加斜线 -- HTML5 规范中明确说明这是可选的。
不要省略可选的结束标签（closing tag）（例如，</li> 或 </body>）。
颜色用小写，用缩写, #fff
小数不用写前缀, 0.5s -> .5s；0不用加单位
详情 : 编码规范
Google HTML/CSS Style Guide
Naming CSS Stuff Is Really Hard
垂直居中的几种实现方式
父容器上下padding相等
<style>
.box {
padding: 50px 0;
text-align: center;
}
</style>
<div class="box">
<p>让我垂直居中</p>
</div>
绝对定位实现垂直居中
<style>
.box {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 500px;
height: 500px;
}
</style>
<div class="box">
<p> 今天下雨了 </p>
</div>
使用vertical-align
.box {
width: 500px;
height: 500px;
border: 1px solid red;
text-align: center;
}
.box: before {
content:" ";
display: inline-block;
vertical-align: middle;
height: 100%;
}
.test {
vertical-align: middle;
}
<div class="box">
<span class="test">aaa</span>
</div>
把父元素设置为 dispaly: table-cell; 然后使用vertical-align 垂直居中
.box{
width: 500px;
height: 500px;
border: 1px solid red;
display: table-cell;
vertical-align: middle;
text-align: center;
}
<div class="box">
<span>aaa</span>
</div>
使用 flex
.box{
border: 1px solid black;
width: 500px;
height: 500px;
display: flex;
justify-content: center;
align-items: center;
}
<div class="box">
<span>aaa</span>
</div>
