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.