前端技巧总结

Posted 2020-09-20

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端技巧总结相关的知识，希望对你有一定的参考价值。

日常总结一些前端的实用技巧，方便以后查询使用

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;
}