[TOC] # 你知道哪幾種頁面布局方式 **考察點** 頁面布局方式，實現代碼及其優缺點 **回答** ## 1. 靜態布局 瀏覽器默認布局方式，使用靜態盒模型布局，設置好各個盒子的寬高，內外邊距。此布局方式很容易內容過寬產生滾動條或者被遮擋。 ## 2. 彈性布局 彈性布局可以使子元素能夠根據外部寬度適當縮放寬度和高度，也可以使子元素根據需要的方式進行對齊。 優點：內部元素可以根據外部寬度適當的縮放寬度和高度。 缺點：窄屏下會導致子元素高度變得很大，不利于閱讀。 詳見 [擴展：彈性布局詳解](layout-flex.md) ## 　3. 浮動布局 浮動布局使元素能夠擺脫塊級或者行內的限制，是元素可以緊密的排列在一起，主要利用`float`屬性。類似百度圖片或者pinterest寫網站的圖片列表，主要就是采用的浮動布局。 優點：自適應寬度，容器大小變化時，容器內的元素會自動重新排列，減少每一行的個數，窄屏下利于閱讀。 缺點：需要清除浮動，否則會覆蓋正常元素。詳見 [清除浮動](clearfix.md) ## 4.定位布局 定位布局主要采用 `position:absolute`和`position:fixed`實現，比如很多網站上跟隨滾動的客服按鈕，右下角的返回頂部，電商網站的樓層導航，微博的右下角的私信聊天窗口等，使用`position:fixed`實現。而很多距離頁面頂部固定高度的彈出對話框，頁面頂部右側的登錄/個人信息等，則是用`position:absolute`實現的。 優點：能夠使元素脫離文檔流，不影響正常元素的布局展示。 缺點：他的優點也是他的缺點：不夠靈活和容易覆蓋其他元素，特別是`position:fixed`只能相對瀏覽器視窗，如果想讓頁面一大塊內容進行偏移，那么需要單獨修改元素的位置。 ## 5.響應式布局 響應式布局是一份代碼能夠兼容多種終端(PC瀏覽器，手機瀏覽器，Pad等)，無論在多大的寬度上頁面都有比較好的呈現。響應式布局需要處理多種情況，例如字體大小，圖片大小（過大時需要橫向拉動，過小時無法看清楚），容器寬度，多列在窄屏下不利于閱讀等。響應式布局可以用的手段有： 1. media-query：根據不同屏幕寬度使用不同的樣式。詳見：[擴展：媒體查詢](media-query.md) 2. 單位: rem, %,vw, vh等重新定義基準大小，按比例顯示寬度和高度。[單位](unit.md) 3. 靜態布局和浮動布局等各種布局方式綜合運用，使內容能夠自然的換行，而不用拉動橫向滾動條。 優點：一份代碼能夠兼容多種終端，減少重復邏輯的開發。 缺點：編寫代碼時需要做好各種終端的適配。 ## 6.多列布局 多列布局使容器下面的內容能夠等高的分布在多個列中，這種方式在報紙、論文等情景比較常見，主要用到了`column-count`或`column-width`屬性。[擴展：多列布局詳解](layout-column.md) 優點：能夠分列排版，在寬幅度版面上有利于閱讀。 缺點：內容完全評分到各列，不能做到精確控制，同時在窄屏上也不利于閱讀。 ## 7.網格布局