CSS相关规范

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;  
}

3、代码效果

tiptop代码效果