1.固定布局
寬度濒憋，高度固定，頁面被一個固定網(wǎng)頁包裹但壮，容器不能移動冀泻，頁面的寬高不隨頁面的變化而變化，這種布局大家比較熟悉蜡饵，這種方式一度成為頁面布局的主流方式腔长，這樣布局設計簡單，更容易定義验残，但是由于屏幕尺寸的不同，特別是移動端各個設備的不同巾乳，這種布局在靈活性方式可用度不高您没。
2.流式布局
以百分比為主要形式，讓屏幕自適應胆绊，這種布局方式定義靈活氨鹏，能夠根據(jù)屏幕的情況變化，但是這種方式設計的效果不太容易控制压状，一般移動端結合rem用的比較多仆抵，pc端用的不是非常多
3.彈性布局
浮動部分和清楚浮動部分主要是兼容添加的一些代碼，重點看彈性布局的部分种冬，彈性布局相對前兩種出現(xiàn)的比較晚些镣丑，但是彈性布局功能還是很強大的，布局也非常方便娱两，但是此布局形式在pc端并不推薦使用莺匠，ie9以下瀏覽器均不支持，另外火狐等一些瀏覽器也需要做兼容十兢，移動端目前絕大部分瀏覽器都已經(jīng)支持彈性布局趣竣，在移動端大家可以嘗試使用摇庙。
4.浮動布局
浮動布局關鍵詞，float遥缕，可以設置left或者right卫袒，他使元素脫離文檔流進而達到布局的目的，也是目前一個比較主流的布局方式单匣，但是使用浮動的結束以后夕凝，別忘記清除浮動哦。
5.定位布局
定位布局也是目前比較常用的一種布局方式封孙，關鍵詞：?position: fixed;固定布局迹冤，將元素固定在一個位置，不隨頁面移動而移動虎忌，position: relative;相對定位泡徙，相對于元素自身定位，不脫離文檔流膜蠢，相當于定義一個參照物堪藐，一般和絕對定位結合使用，position: absolute;絕對定位挑围，脫離文檔流礁竞，一般和相對定位結合使用，如果不定義相對定義杉辙，將會相對于整個瀏覽器定位模捂，所以定位布局，一般情況下都是相對定位和絕對定位結合著來蜘矢，相當定位相當于劃定一個勢力范圍狂男，制定一個封閉的容器塊，然后絕對定位就行對于相對定位來定位品腹，從而達到有效的布局岖食。
6.margin和padding?
margin是外邊距，padding內(nèi)邊距舞吭，外邊距是盒子與盒子之間的距離泡垃，內(nèi)邊距是盒子的邊和盒子內(nèi)部元素的距離，因此在使用的時候應該有選擇的使用羡鸥，另外margin會出現(xiàn)吃邊距的情況
ps：沒有一成不變的布局方式蔑穴，也沒有任何一種方式能夠滿足各方面的需求，大家可以多積累些經(jīng)驗惧浴，根據(jù)自己的需要使用最有效布局方式做出最帥最美的頁面澎剥。
