静态页面布局方法分享

在初级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里加上。

<metaname="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，哪当我没说）

少用绝对定位的原因是定位需要外层支持，而相对定位不需要。

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

原文链接： 静态页面布局方法分享 - 林恒 - 博客园
作者：林恒