前端基礎進階(二)

默認樣式重置

---

統同樣式重置

1. input類型

   input{
      outline:none;
      border-width:0;
   }

2. 盒子模型

   div{
      box-sizing:border-box;
      -moz-box-sizing:border-box; /* Firefox */
      -webkit-box-sizing:border-box; /* Safari */
   }

3. 默認邊距

   *{
    padding:0;
    margin:0;
    }

4. ul,ol,a

ul,ol{
list-style: none;
}

a{
text-decoration:none;
}

1. table樣式

table {
    border-collapse: collapse;
    border-spacing: 0;
}

IOS下的樣式問題

1. 默認button樣式及圓角:

input{
    -webkit-appearance:none;
     border-radius: 0;  
}

1. 點擊以後樣式

a,button,input,textarea{
    -webkit-tap-highlight-color: rgba(0,0,0,0;)
}

chrome瀏覽器

1. input輸入框高光

   input:focus{
      -webkit-tap-highlight-color:rgba(0,0,0,0);
      -webkit-user-modify:read-write-plaintext-only;
   }

移動端開發默認設置

1. meta設置

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1, user-scalable=no, width=device-width">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-title" content="">
<meta name="apple-mobile-web-app-status-bar-style" content="" />
<meta name="format-detection"content="telphone=no"/> 
<base target="_blank">