工做中遇到的細節問題總結（二）

在前端開發工做中總會遇到各類各樣的坑，今天這篇博文就是爲了記錄下踩過的坑，分析後發現容易掉坑裏的地方通常是本身不熟悉的知識點或者是易忽略的知識點。故做此文，謹以自勉。

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
詳細使用方法

三角形

矩形減掉一角