靜態頁面佈局方法分享

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

少用絕對定位的緣由是定位須要外層支持，而相對定位不須要。

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