1、编码规范
a)html
语义化标签优先
基于功能命名、基于内容命名、基于表现命名
简略、明了、无后患
所有命名都使用英文小写，命名用引号包裹，用中横线连接，命名体现功能，不涉及表 现样式(颜色、字体、边框、背景等)
b)css
tab 用两个空格表示
css的 :后加个空格， {前加个空格
每条声明后都加上分号
换行，而不是放到一行
颜色用小写，用缩写, #fff
小数不用写前缀, 0.5s -> .5s；0不用加单位
尽量缩写， margin: 5px 10px 5px 10px -> margin: 5px 10px
2、垂直居中有几种实现方式
div装成table： 将div元素做出table的特性，将table-cell里面的元素利用 vertical-align:middle来实现
div.table {
display: table;
border: 10px solid blue;
height: 600px;
}
div.td{
display: table-cell;
border: 10px solid green;
vertical-align: middle;
}
.child{
border: 10px solid red;
}
绝对定位后transform: translate(-50%,-50%)
.parent {
border: 10px solid red;
height: 600px;
position: relative;
}
.child {
border: 10px solid blue;
position: absolute;
width: 300px;
height: 220px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
flex布局
.parent{
border: 10px solid red;
height: 700px;
display: flex;
justify-content: center;
align-items: center;
}
.child{
border: 10px solid blue;
width: 300px;
padding: 20px;
}
添加100%高度的before 、after的inline-block元素
<div class="parent">
<span class="before"></span>
<div class="child">
文字文字文字文字文字文字文字
</div>
<span class="after"></span>
</div>
.parent {
border: 5px solid tomato;
height: 600px;
text-align: center;
}
.child {
display: inline-block;
width: 300px;
border: 5px solid lightskyblue;
vertical-align: middle;
}
.parent .before {
outline: 1px solid transparent;
height: 100%;
display:inline-block;
vertical-align: middle;
}
.parent .after {
outline: 1px solid transparent;
height: 100%;
display:inline-block;
vertical-align: middle;
}
