css 实践技巧

更多的时候我们第一反应是用js计算解决问题，但是js的计算是消耗性能的，所以在有选择的情况下我们应该尽量给自己储备多的选项。

1、实现一个不定宽高的盒子居中

  
里面的盒子

方案一: 利用flex

.test-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 500px;
  height: 700px;
}

方案二：利用transform

.test-wrap {
  position: relative;
  width: 500px;
  height: 700px;
}
.test {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

还有很多方式，例如利用display:table-cell等，但是建议不要用js计算

2、实现某一个板块的滚动跟随（阈值之后吸附于某位置）
position：sticky
因为该属性具有兼容性，所以还需要用js做兼容，具体实现参考https://www.jianshu.com/p/817a5627e2ef

3、打点loading效果

  正在加载中
  ...

备注：主要是利用content

.dot {
  display: inline-block; 
  height: 1em;
  line-height: 1;
  text-align: left;
  vertical-align: -.25em;
  overflow: hidden;
}
.dot::before {
  display: block;
  content: '...\A..\A.';
  white-space: pre-wrap;
  animation: dot 1s infinite step-start both;
}
@keyframes dot {
  33% { transform: translateY(-2em); }
  66% { transform: translateY(-1em); }
}