1.固定布局
寬度，高度固定，頁面被一個固定網頁包裹，容器不能移動，頁面的寬高不隨頁面的變化而變化，這種布局大家比較熟悉，這種方式一度成為頁面布局的主流方式，這樣布局設計簡單，更容易定義，但是由于屏幕尺寸的不同，特別是移動端各個設備的不同，這種布局在靈活性方式可用度不高。
2.流式布局
以百分比為主要形式，讓屏幕自適應，這種布局方式定義靈活，能夠根據屏幕的情況變化，但是這種方式設計的效果不太容易控制，一般移動端結合rem用的比較多，pc端用的不是非常多
3.彈性布局
浮動部分和清楚浮動部分主要是兼容添加的一些代碼，重點看彈性布局的部分，彈性布局相對前兩種出現的比較晚些，但是彈性布局功能還是很強大的，布局也非常方便，但是此布局形式在pc端并不推薦使用，ie9以下瀏覽器均不支持，另外火狐等一些瀏覽器也需要做兼容，移動端目前絕大部分瀏覽器都已經支持彈性布局，在移動端大家可以嘗試使用。
4.浮動布局
浮動布局關鍵詞，float，可以設置left或者right，他使元素脫離文檔流進而達到布局的目的，也是目前一個比較主流的布局方式，但是使用浮動的結束以后，別忘記清除浮動哦。
5.定位布局
定位布局也是目前比較常用的一種布局方式，關鍵詞：?position: fixed;固定布局，將元素固定在一個位置，不隨頁面移動而移動，position: relative;相對定位，相對于元素自身定位，不脫離文檔流，相當于定義一個參照物，一般和絕對定位結合使用，position: absolute;絕對定位，脫離文檔流，一般和相對定位結合使用，如果不定義相對定義，將會相對于整個瀏覽器定位，所以定位布局，一般情況下都是相對定位和絕對定位結合著來，相當定位相當于劃定一個勢力范圍，制定一個封閉的容器塊，然后絕對定位就行對于相對定位來定位，從而達到有效的布局。
6.margin和padding?
margin是外邊距，padding內邊距，外邊距是盒子與盒子之間的距離，內邊距是盒子的邊和盒子內部元素的距離，因此在使用的時候應該有選擇的使用，另外margin會出現吃邊距的情況
ps：沒有一成不變的布局方式，也沒有任何一種方式能夠滿足各方面的需求，大家可以多積累些經驗，根據自己的需要使用最有效布局方式做出最帥最美的頁面。
