CSS 布局經典問題初步整理

標籤：前端

負 magin

清除浮動

居中布局

響應式設計

flexbox 布局

本文主要對 css 布局中常見的經典問題進行簡單說明，並提供相關解決方案的參考鏈結，涉及到三欄式布局，負 margin，清除浮動，居中布局，響應式設計，flexbox 布局，等等。

下面幾個入門教程不錯：

mdn - css入門教程: mdn 的官方文件

學習 css 布局：排版和配色特別舒服，簡短但不深入，適合概覽入門

主要就是經典的絕對定位，相對定位問題。

涉及浮動和清除浮動，主要講解「聖杯」和「雙飛翼」兩種解決方法。這兩種方法實現的都是三欄布局，兩邊的盒子寬度固定，中間盒子自適應，它們實現的效果是一樣的，差別在於其實現的思想。

聖杯：父盒子包含三個子盒子（左，中，右）

父盒子設定左右的 padding 來為左右盒子留位置；

對左右盒子使用相對布局來佔據 padding 的空白，避免中間盒子的內容被左右盒子覆蓋；


class="container">
class="middle">中間彈性區div>
class="left">左邊欄div>
class="right">右邊欄div>
div>

雙飛翼：父盒子包含三個子盒子（左，中，右），中間的子盒子裡再加乙個子盒子。


class="container">
class="middle">
class="middle-inner">中間彈性區div>
div>
class="left">左邊欄div>
class="right">右邊欄div>
div>

聖杯布局和雙飛翼布局解決的問題是一樣的，都是兩邊定寬，中間自適應的三欄布局，中間欄要在放在文件流前面以優先渲染。

簡單說起來就是雙飛翼布局比聖杯布局多建立了乙個 div，但不用相對布局了，少設定幾個屬性。

我自己使用浮動也實現了三欄式布局：左邊盒子左浮動，右邊盒子右浮動，中間盒子利用margin-left和margin-right來為左右盒子留位置，同時父盒子設定overflow: auto;來避免子盒子溢位。


class="container">
class="left">左邊欄div>
class="right">右邊欄div>
class="middle">中間彈性區div>
div>

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

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

簡單總結幾點：

清除浮動主要是為了解決高度塌陷問題。而簡單的clear: both並不能解決這個問題，所以引出了許多解決方案。

順便補充一句，clear float(例如clear: left) 是對某個元素設定，以避免其某一邊有浮動元素，即對當前元素產生約束，約束的邊界為其他的浮動元素。對於已經浮動的元素，設定 clear float 是無效的。

垂直居中

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

水平垂直居中

「響應式設計（responsive design)」是一種讓**針對不同的瀏覽器和裝置「呈現」不同顯示效果的策略。

**查詢(media queries)是做此事所需的最強大的工具。

注： responsive web design ＝ rwd，adaptive web design ＝ awd

rwd：

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

awd：

以上 rwd 和 awd 解釋引自知乎 @屹峰

可以參考 bootstrap 的網格系統：

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

|csdn|oschina