日常總結一些前端的實用技巧，方便以後查詢使用

1）超出文本部分用省略號代替

　　text-overflow:ellipsis;

　　white-space:nowrap;

　　overflow:hidden;

　　text-overflow 盒中的內容在水平方向溢出顯示省略號

　　white-space 設定內容不能換行，在左邊溢出

兼容性：text-overflow --IE -webkit-text-overflow --safair瀏覽器 -o-text-overflow --opera瀏覽器

2）瀏覽器默認光標修改

　　cursor：url(image/cursor.jpg),auto; 自定義光標 註意圖片不應過大，width最大值為128px

　　cursor：pointer 手樣式

　　cursor：default 箭頭樣式

　　更多的cursor請查看W3School上相關內容-->點擊跳轉查看<--

3）瀏覽器默認select樣式修改

select{
    /*chrome和FF裏面的邊框不一樣，所以復寫下*/
    border:1px solid #000;
    /*將默認的select選擇框樣式清除*/
    appearance:none;
    -moz-appearance:none;
    -webkit-appearance:none;
    /*在選擇框的最右側中間顯示小箭頭圖片*/
    background:url(http:
 
//ourjs.github.io/static/2015/arrow.png) no-repeat right center transparent;

    /*為下拉小箭頭留位置，避免被文字覆蓋*/
    padding-right:14px;
}

select增加onchange事件也可以修改樣式

4）圖片和文字並排顯示問題

　　在一個li中是小圖標和數字並排顯示，但是效果出來並不是想要的效果。

後來查找到給img添加屬性vertical-align：middle即可。

添加後的效果：

如果想深入理解vertical-align屬性，可看看張鑫旭大神的《我對CSS vertical-align的一些認識與理解》

前端技巧總結