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

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

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
详细使用方法

三角形

 

矩形减掉一角

 

如果您对本文有什么疑问，欢迎提出个人见解，若您觉得本文对你有用，不妨帮忙点个赞，或者在评论里给我一句赞美，小小成就都是今后继续为大家编写优质文章的动力， 欢迎您持续关注我的博客:)

作者：Jesse131

出处：http://www.cnblogs.com/jesse131/

关于作者：专注前端开发。如有问题或建议，请多多赐教！

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接。