css查缺补漏

1 设置placeholder的字体颜色

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
  color:    #909;
}

2 变小手

 cursor: pointer;

3 字间距

letter-spacing: 10px;

4 button 的边框设置点击无

outline:none;
border:0;

5 段落单词折行显示

word-wrap: break-word;

6 上下左右居中

display: flex;
align-items: center;

7 开头空2字

text-indent: 22px;

8 图片底部的空隙可能是 2px，而有时可能是 4px 或更多。

给图片定义vertical-align也可以解决这个问题，将图片的垂直对齐方式设置为 top 或 bottom，这个空隙会消失。vertical-align:top;

解决办法给img定义vertical-align或者定义为块状display:block，最优的解决办是定义vertical-align，但是定义vertical-align为middle时在IE6中大概还有一像素的上边距，最好为top或bottom。还有种方法是把父容器的字体大小为零font-size:0

9 让一个div在另一个div水平居中，例如顶部tab的那个标题怎么自适应居中。

可以给当前div设置position：absolute;，给body设置position：reletive;

10 padding-right 失效

100% 的宽度 + padding 已经超出了屏幕的宽度
解决：父元素加一个 box-sizing： border-box；

11 每行三个的布局

最外层父元素

padding: 5px 5px 5px 7px;
box-sizing:border-box;

每一个a标签

padding: 5px;
width: 30%;
float: left;
padding-top: 5px;

12 flex每行三个的布局

<ul class="tem-flex">
        <li class="tem-list"></li>
        <li class="tem-list"></li>
        <li class="tem-list"></li>
</ul>

.tem-flex{
    display: flex;
    flex-wrap: wrap;
    justify-content:space-between;
    text-align: justify;
 }

.tem-list{
    width:49%;
    border:1px solid #ff6600;
    margin-bottom: 10px;
}

拖动视窗的话，中间的宽度会稍微变大

原文：https://blog.csdn.net/lucky___star/article/details/87876830

13 div内显示一行，超出部分用省略号显示

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

14、div内显示两行或三行，超出部分用省略号显示

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;（行数）
-webkit-box-orient: vertical;

原文：https://blog.csdn.net/NN_nan/article/details/55045562

15 清除浮动

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}