前端基础进阶(二)

 阅读约 3 分钟

默认样式重置


统一样式重置

  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">
阅读 704发布于 2017-03-07
推荐阅读
前端进阶计划
用户专栏

前端面试专题与日常研究

84 人关注
17 篇文章
专栏主页
目录