1.固定布局
方法裡把加好，然後根據設計稿設定相應的寬度即可，其他地方類似於pc端。 優點 思路沿用pc端，上手比較快 缺點
大屏手機顯示網頁比較寬，而固定布局寬度參照永遠是固定的寬度（設計稿的大小），導致左右兩邊會有空白。手機橫屏的時候兩邊空白更亮。
2.流動布局
方法適用百分比(%)做單位。
優點 能更很好的適應各個螢幕解析度的手機。 缺點
不夠靈活，新增元素時，需要更改其他元素的值。
3.浮動布局
方法float+clearfix(清除浮動)
/--不需相容老版本--/
.clearfix:after
--需要相容老版本--/
clearfix:after
缺點移動端中頻繁的使用定位，會出現一些莫名的bug;
fixed+input在ios上存在bug,會出現使用fixed布局的元素亂掉。在android手機上當input框獲取焦點時，換氣鍵盤，會出現定位的元素被抬公升至手機鍵盤的上方。（了解）
5.混合布局
方法 所謂混合布局，就是把所有學到的知識靈活運用在布局中。例如：rem+百分比(流動布局) flex+rem等 優點 布局靈活，集合其他布局的優勢達到自己的布局要求 缺點
**有點累贅；**不統一，維護困難
6.flex布局(重點)
方法也叫彈性布局。
/--只需父元素設定--/
/--然後子元素設定相應的比例--/
這個是最簡單的flex布局了，其實彈性布局裡面還有很多簡單高效實用的屬性，很方便移動端的布局。 **優點** 自適應很好，靈活性很強，目前在移動端應用的還是比較廣泛。 **缺點**
需要寫很多相容**。
方法 rem是通過根元素進行適配的，網頁中的根元素指的是html我們通過設定html的font-size大小就可以控制rem的大小。有以下兩種適配方式：
1.rem+@media(通過**查詢設定html的font-size值，達到自適應)
html
@media screen and (min-width:321px) and (max-width:375px)
}@media screen and (min-width:376px) and (max-width:414px)
}@media screen and (min-width:415px) and (max-width:454px)
}@media screen and (min-width:455px) and (max-width:554px)
}@media screen and (min-width:455px)
}
2.
rem+js（通過js自動獲取裝置寬度，計算得到相應裝置下html的font-size值達到自適應）（了解）
e.addeventlistener && (n.addeventlistener(o, a, !1), e.addeventlistener("domcontentloaded", a, !1))
} (window);
優點 在任何裝置下都可以達到完全適配，頁面布局樣式完全自適應 缺點
rem+@media這種方式不能所有裝置全適配
8.響應式布局
方法 使用@media(**查詢)設定頁面在不同的螢幕寬度下達到自適應以及響應式（根據不同螢幕大小，頁面布局，樣式會做出相應的調整）典型案例（bootstrap官網） 優點 不僅在不同的螢幕下達到自適應，還會在相應的螢幕下對頁面布局，樣式做出相應的調整，達到更加的使用者體驗 缺點
相容各種裝置工作量大，效率低下；**累贅，會出現隱藏無用的元素，載入時間過長；一定程度上改變了**原有的布局結構，會出現使用者混淆的情況；增加ui和開發的工作量。
9.聖杯布局
利用float來實現，首先將三列放到乙個父元素內後左浮動，之後給左右中分別設定寬度200px,250px,100%。
之後給中間，右邊分別設定margin-left為-200px,-250px。之後再將左右兩列進行相對定位position：relative;並分別設定left:-200px;right:-250px;最後便是等高布局了，給左中右設定padding-bottom:2000px;margin-bottom:-2000px;給其父元素設定overflow:hidden即可。
10.雙飛翼布局
用float來實現，首先將左中右分別設定寬度為200px,100%,250px。中右分別設定margin-left為-200px和-250px.中間元素下有乙個子元素，設定margin-left和margin-right分別為200px餘250px。最後便是等高布局了，給左中右設定padding-bottom:2000px;margin-bottom:-2000px;給其父元素設定overflow:hidden即可。
WPF的幾種布局方式
1 stackpanel 顧名思義 堆疊面板，通過orientation屬性設定子元素的布局排列方向為 vertical 垂直 和 horizontal 水平 不寫其預設值為 vertical 當設定為 vertical 時子元素會沿水平方向拉伸，反之設定為 horizontal 時子元素會沿垂直方...
等高布局的幾種方式
等高布局是指子元素在父元素中高度相等的布局方式。等高布局的實現包括偽等高和真等高，偽等高只是看上去等高而已，真等高是實實在在的等高。邊框模擬 負margin這兩種偽等高以及table實現 absolute實現 flex實現 grid實現和js判斷這五種真等高布局 邊框模擬 因為元素邊框和元素高度始終...
三列布局的幾種方式
兩邊用絕對定位，中間用margin，左右寬度固定，中間寬度不固定，中間主體放在左欄右欄後面 中間欄會佔據整行 charset utf 8 title left center right style head class left div class right div class center di...