总结篇-CSS部分（绝对干货，未完待续...）

1.自定义溢出显示...（省略号）

//情景一：单行显示省略号
div{
    width:100px;    //多宽就要显示省略号
    overflow:hidden;    //溢出隐藏
    text-overflow:ellipsis;    //文本溢出模式
    white-space:nowrap;    //单行书写不换行
}

//情景二：多行显示省略号

div{
    height:60px;    //必要的，否则不知多高显示
    overflow:hidden;
    display:box;
    display:-webkit-box;
    line-clamp:3;	//总计需要显示的行数，与height密切相关
    -webkit-line-clamp:3;
    box-orient:vertical;
    -webkit-box-orient:vertical;
}

 

2.瀑布流的实现

方式一：传统多列浮动：固定屏幕中展示的列数，每一列中间的数据作为一组单独计算，插入数据时分别插入不同列中；

方式二：css3中样式定义：

父级容器设定：
    column-count     //把div中的文本分为多少列
    column-width     //规定列宽
    column-gap       //规定列间隙

子级容器设定
    break-inside: avoid;     //避免元素内部断行并产生新列

示例如下：
    div.farther{
        column-count: 1;
        column- width: 20px;
        column-gap:20px;

	    -webkit-column-count: 1;
        -moz-column-count: 1; 
        -webkit-column- width: 20px;
        -moz-column- width: 20px; 
        -webkit-column-gap:20px; 
        -moz-column-gap:20px; 
    }
    div.children{
        break-inside: avoid;
	    -moz-page-break-inside: avoid; 
        -webkit-column-break-inside: avoid; 
    }

方式三：js脚本执行：动态计算元素的插入位置，利用绝对布局absolute进行定位，根据屏幕的不同可以动态调整；

3.table>tr>td垂直对其方式

//方式一：
    <td valign=’top’>…</td>
    //top(上对齐)/bottom(下对齐)/middle(默认)/baseline(基线对齐)

//方式二：
    <td style=’vertical-align:top’>…</td>
    //top(上对齐)/bottom(下对齐)/middle(默认)/baseline(基线对齐)

4.实现小三角的方式

span{
    width:0;
    height:0;
    overflow:hidden;
    font-size: 0;     
    line-height: 0;
    border-width:15px;
    
    //通过调整这俩来取上下左右的三角
    border-style:dashed dashed solid dashed;		
    border-color:transparent transparent #1D93E5 transparent;
}

5.修改浏览器滚动条样式(IE浏览器不适用)

//滚动条整体样式
::-webkit-scrollbar {
    width: 10px;     //高宽分别对应横竖滚动条的尺寸
    height: 1px;
}

//滚动条里面小方块
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: #535353;
}

//滚动条里面轨道
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 10px;
    background: #EDEDED;
}

6.input中search的默认外框和关闭去除

input[type="search"]{-webkit-appearance:none;}    //外框
input::-webkit-search-cancel-button {display: none;}    //清空小叉叉

7.