CSS综合

look_w

说一说你平时写代码遵守的编码规范
1. 语义化

    语义化标签优先
    基于功能命名、基于内容命名、基于表现命名
    简略、明了、无后患

2. CSS规范

    tab 用两个空格表示
    css的 :后加个空格， {前加个空格
    每条声明后都加上分号
    换行，而不是放到一行
    颜色用小写，用缩写, #fff
    小数不用写前缀, 0.5s -> .5s；0不用加单位
    尽量缩写， margin: 5px 10px 5px 10px -> margin: 5px 10px
    相关的属性声明应当归为一组，并按照positioning,Box model,Typographic,visual顺序

垂直居中有几种实现方式，给出代码范例

    设置上下padding相等

    .ct {
      padding: 40px 0;
      text-align: center;
      background: #eee;
    }

    绝对定位实现垂直居中

    .dialog {
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -200px;
      margin-top: -150px; /*transform: translate(-50%,-50%);*/
      width: 400px;
      height: 300px;
      box-shadow: 0px 0px 3px #000;
    }

    vertical-align实现居中
    JS bin
    table-cell实现居中

    .box{
      width:500px;
      height: 300px;
      border: 1px solid;
      display: table-cell;
      vertical-align: middle;
      text-align: center;
      
    }