css烂笔头

1. 样式调试

outline

html * {
outline: 1px solid red;
}
通过添加outline可以清楚的看到各个块大小，便于调整样式

outline.jpg

hover等动态样式

对于hover等动态样式调试很头疼，以往操作都是开好F12，鼠标移到div上去触发hover，极难调试。
进阶操作，利用styles调试器，如下：

hover.jpg

这里分享一个小技巧（动画效果也OK），先开启F12开发者工具，然后切到sources，回到页面触发hover，鼠标不要挪开，按F8会发现进入断点了，就可以开始你的调试了，如下图

F8.gif

2. 水平居中、垂直居中

水平居中：
（1）text-align: center;
（2）margin: 0 auto;
垂直居中：
（1）推荐使用这种

div{
       display: flex;
       justify-content: center;
       align-items: center;
}

（2）利用position+transform

div{
    position: relative;
  >div{
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
  }
}

3. 省略号（左右）

（1）右省略

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
width: 120px;

(2)左省略

/* 让省略符显示在文本左侧 */
direction: rtl;