静态页面布局方法分享

在初级web前端工程师的工做中，常常须要写一些静态/H5/花里胡哨的页面，这里分享我多年作这些页面总结的经验，但愿对你们有点帮助。

页面初始化及手机端viewport配置

直接上代码：

        
    html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video {
      margin:0;
      padding:0;
      border:0;
    }
    dl,ul,ol,menu,li {
      list-style: none
    }
    body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";background: white;}
    input {
      outline: none;
    }
    a {
      text-decoration: none; /* 去除默认的下划线 */
      outline: none;  /* 去除旧版浏览器的点击后的外虚线框 */
      color: #000;  /* 去除默认的颜色和点击后变化的颜色 */ 
    }
    img{
      width:100%;
      height: auto;
    }
    .left{
      float: left;
    }
    .right{
      float: right;
    }

html里加上

 <meta name="viewport" content="initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5">

这样就能够解决为何你的div和别人的div不同的问题，缘由很简单，浏览器是有默认css的，须要咱们去屏蔽掉才能进行开发

图框式内容布局（本身取的名字）

思路以下：

 这里须要一个全局的盒子来放内容，没有特殊状况，建议全部的内容放到盒子里，方便作响应式

.main-width{
      width:1200px;
      margin:0 auto;
 }

能统一的要统一，防止代码重复，能流动布局就少用浮动，能相对定位就少用绝对定位

这一点决定你的代码量有多少，通常能够减小40%的代码量，而且后期维护简单

以下：

.a h1{
  font-size:20px;
  line-height:20px;    
}
.b h1{
  font-size:15px;
  line-height:20px;    
}　　

能够写成：

h1{
  line-height:20px;    
}
.a h1{
  font-size:20px;  
}
.b h1{
  font-size:12px;  
}

为何能用流动就少用浮动呢，由于浮动是不能撑起盒子的，因此不推荐用（除非你全vw，哪当我没说）

少用绝对定位的缘由是定位须要外层支持，而相对定位不须要。

先分享到，若是有补充的，欢迎评论留言，若是对你有用，麻烦点个关注，谢谢。