CSS 布局經典問題初步整理

三欄式布局參考下面幾個鏈接:

• CSS三欄布局——中間固定兩邊自適應寬度： w3cplus 的文章，使用了雙飛翼和浮動實現兩側定寬、中間自適應，也實現了兩側自適應、中間定寬

• 簡書 - 聖杯布局和雙飛翼布局（前端面試必看）：只講了聖杯，不過特別詳細

• In Search of the Holy Grail：聖杯布局的來源

• 百度前端學院筆記 - 三欄式布局之雙飛翼與聖杯：百度前端學院學員的前端學習筆記

三欄式布局涉及到負 magin 和 清除浮動的問題。

負 magin

這裡引出了「負 margin」的問題：

• 負margin用法權威指南：The Definitive Guide to Using Negative Margins 的譯文,介紹了負 magin 的一些性質和很多實用技巧

• 簡書 - margin為負值產生的影響和常見布局應用：包括對自身的影響，對文檔流的影響，以及一些在布局中的應用技巧(比如去除列表右邊框，負邊距+定位實現水平垂直居中，去除列表最後一個 li 元素的 border-bottom，多列等高)

• 博客園 - CSS布局奇淫巧計之-強大的負邊距：和上文內容差不多

簡單總結幾點：

• 不使用 float 的話，負 margin 元素是不會破壞頁面的文檔流。所以如果你使用負 margin 上移一個元素，所有跟隨的元素都會被上移(而 relative 定位的元素則不同，會保留原位置，影響文檔流)。

• 當 static 元素的 margin-top/margin-left 被賦予負值時，元素將被拉進指定的方向。

• 如果你設置 margin-bottom/right 為負數，元素並不會如你所想的那樣向下/右移動，而是將後續的元素拖拉進來，覆蓋本來的元素。

• 當元素不存在 width 屬性或者

  width: auto

  的時候，負 margin 會增加元素的寬度.

• margin-top 為負值不會增加高度，只會產生向上位移;margin-bottom 為負值不會產生位移，會減少自身的供 CSS 讀取的高度，影響下方的元素位置；上下相鄰的元素兩者均為負時，效果不疊加，取負值更多的那個效果。

清除浮動

清除浮動主要是為了解決高度塌陷問題。而簡單的

clear: both

並不能解決這個問題，所以引出了許多解決方案。

• StackOverflow - What methods of 『clearfix』 can I use?：清除浮動黑科技完整解讀

• 那些年我們一起清除過的浮動：神文，把「清除浮動」定義為「閉合浮動」，把問題由來和解決方案都講清楚了，並且分析了各種解決方案的優劣。

各種解決方案在上面的鏈接里有很詳細的說明了，這裡就不贅述了。大體分為兩類：

• 其一，通過在浮動元素的末尾添加一個空元素，設置

  clear: both

  屬性，after 偽元素其實也是通過 content 在元素的後面生成了內容為一個點的塊級元素；

• 其二，通過設置父元素

  overflow

  或者

  display: table

  屬性來閉合浮動

順便補充一句，clear float(例如

clear: left

) 是對某個元素設置，以避免其某一邊有浮動元素，即對當前元素產生約束，約束的邊界為其他的浮動元素。對於已經浮動的元素，設置 clear float 是無效的。

居中布局

• Centering in CSS: A Complete Guide：非常全面的居中定位博客，包括各種情況下的水平居中，垂直居中和水平垂直居中方案。有展示示例及相應的 HTML 和 CSS 代碼

文章大致結構：

• 水平居中

• 對於行內元素(inline)：

  text-align: center;

• 對於塊級元素(block)：設置寬度且

  marigin-left

  和

  margin-right

  是設成 auto

• 對於多個塊級元素：對父元素設置

  text-align: center;

  ，對子元素設置

  display: inline-block;

  ；或者使用 flex 布局

• 垂直居中

• 已知高度：子元素使用絕對布局

  top: 50%;

  ，再用負的

  margin-top

  把子元素往上拉一半的高度

• 未知高度：子元素使用絕對布局

  position: absolute; top: 50%; transform: translateY(-50%);

• 使用 Flexbox：選擇方向，

  justify-content: center;

• 單行：設置上下 pandding 相等；或者設置

  line-height

  和

  height

  相等

• 多行：設置上下 pandding 相等；或者設置

  display: table-cell;

  和

  vertical-align: middle;

  ；或者使用 flex 布局；或者使用偽元素

• 對於行內元素(inline)

• 對於塊級元素(block)：下面前兩種方案，父元素需使用相對布局

• 水平垂直居中

• 定高定寬：先用絕對布局

  top: 50%; left: 50%;

  ，再用和寬高的一半相等的負 margin 把子元素回拉

• 高度和寬度未知：先用絕對布局

  top: 50%; left: 50%;

  ，再設置

  transform: translate(-50%, -50%);

• 使用 Flexbox：

  justify-content: center; align-items: center;

響應式設計

「響應式設計（Responsive Design)」 是一種讓網站針對不同的瀏覽器和設備「呈現」不同顯示效果的策略。

媒體查詢(Media Queries)是做此事所需的最強大的工具。

註： Responsive Web Design ＝ RWD，Adaptive Web Design ＝ AWD

RWD：

• 採用 CSS 的 media query 技術

• 流體布局（fluid grids）

• 自適應的圖片/視頻等資源素材

（為小、中、大屏幕做一些優化，目的是讓任何尺寸的屏幕空間都能得到充分利用）

AWD：

• CSS media query 技術（僅針對有限幾種預設的屏幕尺寸設計）

• 用 JavaScript 來操作 HTML 內容

• 在伺服器端操作 HTML 內容（比如為移動端減少內容，為桌面端提供更多內容）

以上 RWD 和 AWD 解釋引自 知乎 @屹峰

可以參考 Bootstrap 的網格系統：http://getbootstrap.com/css/#grid-less

The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops).

自己實現網格系統： Creating Your Own CSS Grid System

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！