CSS 综合

一、说一说你平时写代码遵守的编码规范

1. 标签尽量用语义化标签，少用<div> 。
2. 命名格式统一小写，且有意义，用-做分隔符如：nav-item。
3. 图片标签加alt属性；某些标签必要时加title属性；标签闭合。
4. 缩进是两格。
5. 用尽量少的标签，实现同样功能样式。
6. CSS 样式表选择器与花括号之间有一个空格，key:与value之间有空格，每条属性结束加分号，每个选择器单独一行。
7. ···

二、垂直居中的几种实现方式

1. 用padding撑开高度，实现垂直居中：

<style>
  p {
      padding: 50px 0;
      text-align: center;
      background: #eee;
    }
  
  .father {
    background: #eee;
    padding: 50px 0;
  }
  .middle {
    padding: 50px 0;
    background: #f00;
    margin: 0 auto;
    text-align: center;
    color: #fff;
  }
</style>
  <p>看我怎么垂直居中</p>
  <div class="father">
    <div class="middle">文字和块都垂直居中了</div>
  </div>

在线预览

2. 行内元素line-height等于父元素高度，实现垂直居中：

<style>
  div {
    background: #eee;
    height: 400px;
    text-align: center;
  }
    span {
    line-height: 400px;
      background: #f00;
      color: #fff;
    }
</style>
  <div>
    <span>看我垂直居中</span>
  </div>

在线预览

3. 绝对定位（absolute）、固定定位（fixed）实现垂直居中，这里有两种，一种是利用负边距，一种是利用margin: auto：

<style>
  .first,.second {
    background: #eee;
    height: 300px;
    margin: 30px 0;
    position: relative;
  }
  
  .child1, .child2 {
    width: 200px;
    height: 150px;
    background: #f00;
    position: absolute;
  }
  
  .child1 {
    top: 50%;
    left: 50%;
    /* margin-left: -100px; */
    /* margin-top: -100px; */
    transform: translate(-50%, -50%)
  }
  
  .child2 {
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
  }
</style>
  <div class="first">
    <div class="child1">我是第一个</div>
  </div>
  <div class="second">
    <div class="child2">我是第二个</div>
  </div>

PS：fixed用这个两个方法也是可以实现的哦！relative可以使用第一种方法（负边距）。
在线预览

4. 行内元素inline-block的vertical-align属性

<style>
  .father {
      background: #eee;
      height: 400px;
      text-align: center;
    }
    .child {
      display: inline-block;
      vertical-align: middle;
      background: #f00;
      color: #fff;
    }
     .father::after {
      display: inline-block;
      content: '';
      height: 100%;
      vertical-align: middle;
    }
</style>
  <div class="father">
    <span class="child">看我垂直居中</span>
  </div>

PS：这里需要为何要加伪元素after，line-box 的一些原理。在线预览

参考： 未知尺寸元素水平垂直居中

5. table-cell实现垂直居中，这里有两个注意点：

<style>
    div {
      background: #eee;
      height: 400px;
      margin: 30px 0;
    }
    .span1 {
      display: table-cell;
      vertical-align: middle;
      height: 200px;
      background: #f00;
      color: #fff;
    }
  
    .div2 {
      display: table;
      text-align: center;
    }
  
    .span2 {
      display: table-cell;
      vertical-align: middle;
      background: #0f0;
      color: #fff;
    }
</style>
  <div>
    <span class=span1>文字基于红色块居中，父元素不用为 table</span>
  </div>
  <div class="div2">
    <span class=span2>文字基于父元素居中，父元素要 table</span>
  </div>

在线预览

三、编程任务

饥人谷编程任务 | GitHub