工做中遇到的细节问题总结（二）

在前端开发工做中总会遇到各类各样的坑，今天这篇博文就是为了记录下踩过的坑，分析后发现容易掉坑里的地方通常是本身不熟悉的知识点或者是易忽略的知识点。故做此文，谨以自勉。

ios上overflow:hidden失效

须要添加position:relative属性

img仍是background-image

img:html中的标签img是网页结构的一部分会在加载结构的过程当中和其余标签一块儿加载。
background：以css背景图存在的图片background会等到结构加载完成（网页的内容所有显示之后）才开始加载
也就是说，网页会先加载标签img的内容，再加载背景图片background引用的图片。
引入一张图片，那么在这个图片加载完成以前，img后的内容不会显示。而用background来引入一样的图片，网页结构和内容加载完成以后，才开始加载背景图片，网页内容能正常浏览，可是看不到背景图片。结合项目实际状况建议在活动页banner图使用img标签的形式来提高用户体验

flex布局最后一子项右对齐

给最后一子项添加margin-left: auto;
参考stackoverflow

取消select,input,button的默认样式

input,button{
    -webkit-appearance: none;
}
select {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    /*为下拉小箭头留出一点位置，避免被文字覆盖*/
    padding-right: 14px;
}
/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
select::-ms-expand {
    display: none;
}

去掉input在IE上的默认样式

::-ms-clear,::-ms-reveal{display:none;}

ios中页面点击图片和连接时去掉阴影

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);/*将高亮设为透明*/

如有cursor:pointer;则将其去掉.

delete 删除数组元素

单元删除后数组的length属性并不会变化

var array = [1,2,3,4,5];
console.log(array.length);//5
delete array[2];
console.log(array);//[1,2,,4,5]
console.log(array.length);//5

用clip-path剪切各类图形

在开发中咱们用的较多的是矩形和圆形，但是若是需求要作个多边形该如何作呢？这里用到clip-path
详细使用方法

三角形

矩形减掉一角