頁面佈局的方式——前端
頁面佈局的方式
頁面佈局的方式主要有：雙飛翼、多欄、彈性、流式、瀑布流、響應式佈局。
雙飛翼佈局
經典三列布局，也叫做聖盃佈局【Holy Grail of Layouts】是Kevin Cornell在2006年提出的一個佈局模型概念，在國內最早是由淘寶UED的工程師傳播開來，在中國也有叫法是雙飛翼佈局，它的佈局要求有幾點：
a、三列布局，中間寬度自適應，兩邊定寬；
b、中間欄要在瀏覽器中優先展示渲染；
c、允許任意列的高度最高；
d、要求只用一個額外的DIV標籤；
e、要求用最簡單的CSS、最少的HACK語句；
在不增加額外標籤的情況下，聖盃佈局已經非常完美，聖盃佈局使用了相對定位，以後佈局是有侷限性的，而且寬度控制要改的地方也多。在淘寶UED（User Experience Design）探討下，增加多一個div就可以不用相對佈局了，只用到了浮動和負邊距，這就是我們所說的雙飛翼佈局。
多欄佈局
a、欄柵格系統：就是利用浮動實現的多欄佈局，在bootstrap中用的非常多。
b、多列布局：柵格系統並沒有真正實現分欄效果（如word中的分欄），CSS3爲了滿足這個要求增加了多列布局模塊。
彈性佈局（Flexbox）
CSS3引入了一種新的佈局模式——Flexbox佈局，即伸縮佈局盒模型（Flexible Box），用來提供一個更加有效的方式制定、調整和分佈一個容器裏項目佈局，即使它們的大小是未知或者動態的，這裏簡稱爲Flex。
Flexbox佈局常用於設計比較複雜的頁面，可以輕鬆的實現屏幕和瀏覽器窗口大小發生變化時保持元素的相對位置和大小不變，同時減少了依賴於浮動佈局實現元素位置的定義以及重置元素的大小。
Flexbox佈局在定義伸縮項目大小時伸縮容器會預留一些可用空間，讓你可以調節伸縮項目的相對大小和位置。例如，你可以確保伸縮容器中的多餘空間平均分配多個伸縮項目，當然，如果你的伸縮容器沒有足夠大的空間放置伸縮項目時，瀏覽器會根據一定的比例減少伸縮項目的大小，使其不溢出伸縮容器。
綜合而言，Flexbox佈局功能主要具有以下幾點：
a、屏幕和瀏覽器窗口大小發生改變也可以靈活調整佈局；
b、可以指定伸縮項目沿着主軸或側軸按比例分配額外空間（伸縮容器額外空間），從而調整伸縮項目的大小；
c、可以指定伸縮項目沿着主軸或側軸將伸縮容器額外空間，分配到伸縮項目之前、之後或之間；
d、可以指定如何將垂直於元素佈局軸的額外空間分佈到該元素的周圍；
e、可以控制元素在頁面上的佈局方向；
f、可以按照不同於文檔對象模型（DOM）所指定排序方式對屏幕上的元素重新排序。也就是說可以在瀏覽器渲染中不按照文檔流先後順序重排伸縮項目順序。
瀑布流佈局
瀑布流佈局是流式佈局的一種。是當下比較流行的一種網站頁面佈局，視覺表現爲參差不齊的多欄佈局，隨着頁面滾動條向下滾動，這種佈局還會不斷加載數據塊並附加至當前尾部。最早採用此佈局的網站是Pinterest，逐漸在國內流行開來。
優點
a、有效的降低了界面複雜度，節省了空間：我們不再需要臃腫複雜的頁碼導航鏈接或按鈕了。
b、對觸屏設備來說，交互方式更符合直覺：在移動應用的交互環境當中，通過向上滑動進行滾屏的操作已經成爲最基本的用戶習慣，而且所需要的操作精準程度遠遠低於點擊鏈接或按鈕。
c、更高的參與度：以上兩點所帶來的交互便捷性可以使用戶將注意力更多的集中在內容而不是操作上，從而讓他們更樂於沉浸在探索與瀏覽當中。
缺點
a、有限的用例：
無限滾動的方式只適用於某些特定類型產品當中一部分特定類型的內容。
例如，在電商網站當中，用戶時常需要在商品列表與詳情頁面之間切換，這種情況下，傳統的、帶有頁碼導航的方式可以幫助用戶更穩妥和準確的回到某個特定的列表頁面當中。
b、額外的複雜度：
那些用來打造無限滾動的JS庫雖然都自稱很容易使用，但你總會需要在自己的產品中進行不同程度的定製化處理，以滿足你們自己的需求;另外這些JS庫在瀏覽器和設備兼容性等方面的表現也參差不齊，你必須做好充分的測試與調整工作。
c、再見了，頁腳：
如果使用了比較典型的無限滾動加載模式，這就意味着你可以和頁腳說拜拜了。
最好考慮一下頁腳對於你的網站，特別是用戶的重要性;如果其中確實有比較重要的內容或鏈接，那麼最好換一種更傳統和穩妥的方式。
千萬不要耍弄你的用戶，當他們一次次的瀏覽到頁面底部，看到頁腳，卻因爲自動加載的內容突然出現而無論如何都無法點擊頁腳中的鏈接時，他們會變的越發憤怒。
d、集中在一頁當中動態加載數據，與一頁一頁的輸出相比，究竟那種方式更利於SEO，這是你必須考慮的問題。對於某些以類型網站來說，在這方面進行冒險是很不划算的。
e、關於頁面數量的印象：
其實站在用戶的角度來看，這一點並非負面;不過，如果對於你的網站來說，通過更多的內容頁面展示更多的相關信息(包括廣告)是很重要的策略，那麼單頁無限滾動的方式對你並不適用。
流式佈局（Fluid）
固定佈局和流式佈局在網頁設計中最常用的兩種佈局方式。固定佈局能呈現網頁的原始設計效果，流式佈局則不受窗口寬度影響，流式佈局使用百分比寬度來限定佈局元素，這樣可以根據客戶端分辨率的大小來進行合理的顯示。
響應式佈局
響應式佈局是Ethan Marcotte在2010年5月份提出的一個概念，簡而言之，就是一個網站能夠兼容多個終端——而不是爲每個終端做一個特定的版本。這個概念是爲解決移動互聯網瀏覽而誕生的。
響應式佈局可以爲不同終端的用戶提供更加舒適的界面和更好的用戶體驗，而且隨着目前大屏幕移動設備的普及，用“大勢所趨”來形容也不爲過。隨着越來越多的設計師採用這個技術，我們不僅看到很多的創新，還看到了一些成形的模式。
優點
a、面對不同分辨率設備靈活性強
b、能夠快捷解決多設備顯示適應問題
缺點
a、兼容各種設備工作量大，效率低下
b、代碼累贅，會出現隱藏無用的元素，加載時間加長
c、其實這是一種折中性質的設計解決方案，多方面因素影響而達不到最佳效果
d、一定程度上改變了網站原有的佈局結構，會出現用戶混淆的情況
注
本文來自牛客網，學習過程中看到的，記錄下來。 鏈接——牛客網.