工作中常用的HTML+CSS布局有哪些可以總結出的模式？

01-14

工作中常用的HTML+CSS布局有哪些可以總結出的模式？或者HTML+CSS布局有哪些經典案例？
比如

1. 固定側邊欄布局
2. 清除浮動
3. 垂直居中
等

有沒有其他常用的、經典的、需要大面積普及的模式或者案例？
希望本問答可以成為一個聚集經典的問答。

快速碼字，如果有誤回來修改，歡迎反饋和補充。

對於【整個頁面】的布局，現在由於table布局基本已經銷聲匿跡（html郵件還在用），所以「HTML+CSS布局」幾乎是所有布局的統稱。

首先說下移動端的布局：

*【rem布局】：rem是指html元素上的字體大小對應的像素數值，使用rem為長度單位。理想情況下如果將所有的長度單位都用rem標示，那麼我只需要更改html上的font-size即可同步按比例更改所有長度單位（包括元素寬高、邊距、字體大小等）。這在手機屏幕大小不定時就特別有用，只需要計算一下手機屏幕寬度，設置合適的html上的font-size，就能自適應。這裡有一個開源代碼能讓你輕鬆完成rem布局和了解更多信息：jieyou/rem_layout · GitHub

*【彈性盒模型布局】：在rem開始風靡以前，為了解決手機屏幕寬度不定的問題，更多的採用的是彈性盒模型，一句話介紹就是同級子元素按比例佔據橫向剩餘區域（縱向彈性盒這裡暫不展開）。擴展閱讀：使用 CSS 彈性盒，如果你不了解彈性盒，可以在不掌握任何知識的情況下用這個插件來實現：jieyou/flexibleWapHelper · GitHub

*【百分比布局】：移動端前端開發的蠻荒階段，我們採用的是遠古時代的百分比布局，簡單粗暴：橫向充滿則100%；兩欄則各50%；三欄則各33.3%，不過這種方式很快被彈性盒模型布局取代。

上述移動端布局中，通常都會互相結合使用，並且在設定長度單位時，一部分元素還是會根據情況使用絕對的像素值單位（比如設置1px寬的border）（css像素和物理像素這裡暫不展開）。

然後說PC端的，由於各個CSS框架的推進，基本上都是以12列（或12的倍數）網格布局為主了，然後網格布局又分為【流式網格】和【固定寬度網格】（如總寬度設為960px）。前者通常用百分比來實現，並且已經計算和減去了所謂的「槽」的寬度；後者通常是設置了具體的像素定值。

在更早的時候，則是常用的一欄、兩欄、三欄布局，內部通常都用浮動來實現。

樓主所說的

「

比如

1. 固定側邊欄布局

2. 清除浮動

3. 垂直居中

」

都是某些布局的細節，我認為還不能成為「模式」、「經典案例」，應該是一個前端開發人員必備的最原子的技能，基本上如果純手工切幾個稍微複雜的頁面都會遇到，一次基本就記住和掌握了。

ExtJS Layout Examples