一、基礎佈局方式
0. 普通/文件流 佈局
早期 <table>， 後來 <div> ，再後來 html5 語意化標籤按照自上而下的方式順次排布。
1. Float 佈局 float: left/right
最初設計目的是用於圖文環繞排版、不過目前常用於左右佈局。
2. 絕對佈局 position: absolute,position: fixed
保持與目標元素（position不為static的最近父元素）的絕對距離，使用場景有頂部固定的廣告欄，瀑布流等等。
3. Grid 網格佈局: display:grid
較為系統的佈局方案，詳見：https://www.w3cplus.com/css/learncssgrid.html
4. css3 Flex 彈性盒子佈局: display:flex
較為系統的佈局方案，詳見：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
二、常見的佈局概念以及實現方法
0. 靜態佈局
靜態佈局：網頁佈局始終按照固定的佈局和尺寸來顯示，不使用 Flex 之類的彈性盒子方案。
實現方法：
- 普通/文件流 佈局
- Float 佈局
- 絕對佈局
對於PC：一般居中佈局，所有樣式使用絕對寬度/高度(px)，螢幕寬高有調整時，使用滾動條來查閱被遮掩部分；
對於移動裝置：另外建立移動網站，單獨設計一個佈局，使用不同的域名如 wap.或m., 在 <viewport meta> 標籤上設定 width，頁面的各個元素也採用px作為單位。通過用 js 動態修改標籤的initial-scale使得頁面等比縮放，從而剛好佔滿整個螢幕。
優點：這種佈局方式對設計師和 css 編寫者來說都是最簡單的，亦沒有相容性問題。
缺點顯而易見，不能根據使用者的螢幕尺寸做出不同的展現：
- 窄螢幕滾動條體驗很差
- 寬屏有大片空白，不利於空間利用
1. 流式佈局
流式佈局目的是在不同大小的裝置上滿屏呈現同樣網頁。它是用於解決類似的裝置不同解析度之間的相容(一般解析度差異較少)。
實現方法：
- 允許網頁寬度自動調整：<meta name="viewport" content="width=device-width, initial-scale=1" />
- 不使用絕對尺寸（包括容器/字型/圖片），使用百分比、em、rem、vw、vh 等
- 可使用 flex 等彈性盒子（不要使用 px 定尺寸）
優點：頁面左右滿屏。
但缺點明顯：
- 使用百分比定義，所以在大螢幕的手機/Pad 下（或者橫屏下）顯示效果會變成有些頁面元素被拉的很大，但是內容數量卻不變，顯得稀疏不緊湊，空間利用率低下。
- 如果文字也按照百分比放大，則整體效果會非常不協調（老人機效果）。
2. 自適應佈局
自適應佈局是為不同的螢幕解析度分別定義不同的佈局。改變螢幕解析度可以切換不同的靜態佈局（頁面元素位置可能發生改變），但在每個靜態佈局中，頁面元素不隨視窗大小的調整發生變化。
自適應佈局看作是靜態佈局的一個合集。
實現方式：
- 靜態佈局方法
- 解析度 detector（media query/server-side detector/UA）
自適應佈局 頁面裡面元素的位置會變化，很好的解決了流式佈局中的大屏空間利用率不高弊端。
缺點：單個佈局容器無法靈活伸縮，未觸釋出局切換的情況下，容器仍然容易出現靜態佈局中提到的問題。
3. 響應式佈局
響應式佈局同樣分別為不同的螢幕解析度定義佈局。改變螢幕解析度可以通過 css Media query 實時地切換不同的佈局（頁面元素位置可能發生改變），在每個佈局中，頁面元素會隨視窗大小的調整發生流式佈局中的自動尺寸變化。
實現方式：
- 流式佈局
- css media query
響應式佈局 融合了流式佈局和自適應佈局的優勢。
缺點：css 程式碼繁瑣，對於特定的裝置有較多冗餘，適用於對於各個終端（特別是移動端）效能要求不高的 Blog Dos 站點。
三、關於網頁設計
佈局的目的，歸根結底，都是為了網頁設計服務。那麼就順帶聊一聊和響應式設計（RWD）和自適應設計（AWD）。
1. 響應式設計（RWD）
Wikipedia: Responsive web design (RWD) is an approach to web design which makes web pages render well on a variety of devices and window or screen sizes. Content, design and performance are necessary across all devices to ensure usability and satisfaction
“Progressive enhancement”, “one-fits-all”
響應式設計基於響應式佈局，使用同一套頁面在各種各樣不同大小的裝置上進行大小合適、佈局（甚至功能）合理的展現。
響應式設計會根據識別螢幕寬度對於展示的具體內容塊進行位置調整，甚至展示和隱藏。
實現方式：
- 響應式佈局
- 特性檢測 （用於網頁功能的漸進增強）
2. 自適應設計（AWD）
Wikipedia: Adaptive web design is a process of server-side detection that chooses a design layout and size to display. All types of web design layouts can be used, including responsive layout. The adaptive design will serve different versions of the site to different devices based on common screen sizes and resolutions. The only difference is the way the design is looked at from a collateral or device viewpoint rather than the responsive web design (RWD) one-size-fits-all approach to layout
“All types of web design layouts”, “different versions to different devices”,
自適應設計是通過服務端檢測裝置型別、從 site 的不同版本中選擇最合適該裝置型別的設計佈局/尺寸的版本進行展示。它可以使用到所有（包括響應式佈局）佈局方案。
實現方式：
- server-side detection
- different versions to different devices
對於 PC: 可使用流式佈局；
對於 Mobile: 可使用流式佈局。推薦一個 Rem 解決方案： - 設定元素（可以包括字型等）大小為 rem （rem 是以跟元素font-size為基準的單位）
- 按照螢幕寬度的不同，js 動態設定 <html> 的 font-size 大小，元素同樣會按照螢幕寬度等比例放大縮小
資源網站大全 https://55wd.com 設計導航https://www.wode007.com/favorites/sjdh
RWD 和 AWD 的異同
相同點：
- 均針對不同的解析度/device 採用不同的樣式和佈局達到頁面展示最優
- 佈局方式本質沒有差別（AWD 也 including responsive layout）
不同點：
- 前者強調同一套頁面多端相容展示，而後者給出多套頁面，對於不同 device 進行了分類處理
- 前者是通過 css Media query 進行解析度檢測，可以實時的響應瀏覽器尺寸變化，改變元素尺寸/佈局，而後者一般是 server side detection，一次性渲染既定佈局和樣式