在初級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，哪當我沒說）

少用絕對定位的原因是定位需要外層支援，而相對定位不需要。

先分享到，如果有補充的，歡迎評論留言，如果對你有用，麻煩點個關注，謝謝。