前端基础进阶(二)

默认样式重置

---

统一样式重置

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">