本篇文章的內容基本來自《學習CSS布局》教程翠胰，如有疑問可直接去教程官網去查看，本篇文章只做精煉提取自脯。

一亡容、知識點

• 每一個元素都有默認的 display 屬性，如block冤今、inline闺兢、none等
• 塊級元素的 width 元素可以防止它撐滿整個屏幕
• 設置塊級元素的寬度之后，再設置其左右外邊距為 auto 則可以讓其居中顯示
• 所有瀏覽器都支持 max-width 屬性

二戏罢、盒模型

討論寬度的時候屋谭，應該結合另外一個相關聯的重要的知識點：盒模型。
當你設置了元素的寬度龟糕，實際展現的元素卻超出你的設置：這是因為元素的邊框和內邊距會撐開元素桐磁。

.simple {
  width: 500px;
  margin: 20px auto;
}

.fancy {
  width: 500px;
  margin: 20px auto;
  padding: 50px;
  border-width: 10px;
}

width相同，padding不同

人們慢慢的意識到傳統(tǒng)的盒子模型不直接讲岁，所以他們新增了一個叫做 box-sizing 的CSS屬性我擂。當你設置一個元素為 box-sizing: border-box; 時，此元素的內邊距和邊框不再會增加它的寬度缓艳。如下：

.simple {
  width: 500px;
  margin: 20px auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.fancy {
  width: 500px;
  margin: 20px auto;
  padding: 50px;
  border: solid blue 10px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

box-sizing: border-box

既然沒有比這更好的方法校摩，一些CSS開發(fā)者想要頁面上所有的元素都有如此表現。所以開發(fā)者們把以下CSS代碼放在他們頁面上：

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

這樣可以確保所有的元素都會用這種更直觀的方式排版阶淘。

不過 box-sizing 是個很新的屬性衙吩，目前你還應該像我上面例子中那樣使用 -webkit- 和 -moz- 前綴。這可以啟用特定瀏覽器實驗中的特性溪窒。同時記住它是支持IE8+的坤塞。

結論

box-sizing: border-box;屬性會使元素的內邊距和邊框不再會增加它的寬度

三冯勉、Position 定位

更多復雜的布局，需要使用 position 屬性摹芙。
它有一大堆的值灼狰，名字還都特抽象，very 難記浮禾。
我們一個個的過一遍伏嗜，不過最好還是把這頁放到書簽里。

3.1 static

.static {
  position: static;
}

static

3.2 relative

.relative1 {
  position: relative;
}
.relative2 {
  position: relative;
  top: -20px;
  left: 20px;
  background-color: white;
  width: 500px;
}

relative

relative 表現的和 static 一樣军熏，除非你添加了一些額外的屬性。
在一個相對定位（position屬性的值為relative）的元素上設置 top 卷扮、 right 荡澎、 bottom 和 left 屬性會使其偏離其正常位置。其他的元素的位置則不會受該元素的影響發(fā)生位置改變來彌補它偏離后剩下的空隙晤锹。

3.3 fixed

一個固定定位（position屬性的值為fixed）元素會相對于視窗來定位摩幔，這意味著即便頁面滾動，它還是會停留在相同的位置鞭铆。和 relative 一樣或衡， top 、 right 车遂、 bottom 和 left 屬性都可用封断。

.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 200px;
  background-color: white;
}

以上的代碼，會讓一個元素固定在瀏覽器右下角舶担。
一個固定定位元素不會保留它原本在頁面應有的空隙（脫離文檔流）坡疼。

令人驚訝地是移動瀏覽器對 fixed 的支持很差。這里有相應的解決方案.

3.4 absolute

absolute 是最棘手的 position 值衣陶。 absolute 與 fixed 的表現類似柄瑰，但是它不是相對于 視窗 而是相對于最近的“positioned”祖先元素。如果絕對定位（position屬性的值為absolute）的元素沒有“positioned”祖先元素剪况，那么它是相對于文檔的 body 元素教沾，并且它會隨著頁面滾動而移動。
記住一個“positioned”元素是指 position 值不是 static 的元素拯欧。

這里有一個簡單的例子：

.relative {
  position: relative;
  width: 600px;
  height: 400px;
}
.absolute {
  position: absolute;
  top: 120px;
  right: 0;
  width: 300px;
  height: 200px;
}

absolute

這部分比較難理解详囤，但它是創(chuàng)造優(yōu)秀布局所必需的知識。下面我們會使用 position 做更具體的例子镐作。

3.5 position例子

通過具體的例子可以幫助我們更好地理解“position”藏姐。下面是一個真正的頁面布局。

.container {
  position: relative;
}
nav {
  position: absolute;
  left: 0px;
  width: 200px;
}
section {
  /* position is static by default */
  margin-left: 200px;
}
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 70px;
  background-color: white;
  width: 100%;
}
body {
  margin-bottom: 120px;
}

positon 例子

這個例子在容器比nav元素高的時候可以正常工作。如果容器比nav元素低，那么nav會溢出到容器的外面畏线。之后我們會討論下其他布局技術压怠，它們都各有優(yōu)劣。

四典挑、float 浮動

另一個布局中常用的CSS屬性是 float 。Float 可用于實現文字環(huán)繞圖片，如下：

img {
  float: right;
  margin: 0 0 1em 1em;
}

float

4.1 clear 控制浮動

clear 屬性被用于控制浮動曙寡。比較下面兩個例子：

<div class="box">...</div>
<section>...</section>

.box {
  float: left;
  width: 200px;
  height: 100px;
  margin: 1em;
}

clear之前

在這個例子中， section 元素實際上是在 div 之后的（譯注：DOM結構上）寇荧。然而 div 元素是浮動到左邊的举庶，于是 section 中的文字就圍繞了 div ，并且 section 元素包圍了整個元素揩抡。如果我們想讓 section 顯示在浮動元素之后呢户侥？

.box {
  float: left;
  width: 200px;
  height: 100px;
  margin: 1em;
}
.after-box {
  clear: left;
}

clear之后

4.2 overflow 清除浮動（clearfix hack）

在使用浮動的時候經常會遇到一個古怪的事情：

img {
  float: right;
}

因為浮動，圖片溢出div

這個圖片比包含它的元素還高烁设， 而且它是浮動的替梨，于是它就溢出到了容器外面！
見證奇跡的時刻到了装黑！有一種比較丑陋的方法可以解決這個問題耙替，它叫做清除浮動（clearfix hack）.
讓我們加入一些新的CSS樣式：

.clearfix {
  overflow: auto;
}

現在再看看發(fā)生了什么：

清除浮動后

這個可以在現代瀏覽器上工作。如果你想要支持IE6曹体，你就需要再加入如下樣式：

.clearfix {
  overflow: auto;
  zoom: 1;
}

有些獨特的瀏覽器需要“額外的關照”俗扇。清除浮動這潭水很深很深，但是這個簡單的解決方案已經可以在今天所有的主要瀏覽器上工作箕别。

4.3 浮動布局例子

完全使用 float 來實現頁面的布局是很常見的铜幽。這里有一個我之前用 position 實現的布局例子，這次我使用 float 實現了它串稀。

nav {
  float: left;
  width: 200px;
}
section {
  margin-left: 200px;
}

float改造之前的例子

這個例子和之前那個外觀一模一樣除抛。請注意我們在容器上做了“清除浮動”。原本在這個例子中是不需要的母截，但是當 nav 比非浮動的內容還要高時就需要了到忽。

4.4 百分比寬度

百分比是一種相對于包含塊的計量單位。它對圖片很有用：如下我們實現了圖片寬度始終是容器寬度的50%。把頁面縮小看下效果喘漏！

百分比寬度

你甚至還能同時使用 min-width 和 max-width 來限制圖片的最大或最小寬度护蝶！

4.5 百分比寬度布局

你可以用百分比做布局，但是這需要更多的工作翩迈。在下面的例子中持灰，當窗口寬度很窄時 nav 的內容會以一種不太友好的方式被包裹起來「核牵總而言之堤魁，選一種最合適你的內容的方式。

nav {
  float: left;
  width: 25%;
}
section {
  margin-left: 25%;
}

百分比寬度布局

當布局很窄時返十， nav 就會被擠扁妥泉。更糟糕的是，你不能在 nav 上使用 min-width 來修復這個問題洞坑，因為右邊的那列是不會遵守它的盲链。

4.6 媒體查詢

“響應式設計（Responsive Design” 是一種讓網站針對不同的瀏覽器和設備“呈現”不同顯示效果的策略，這樣可以讓網站在任何情況下顯示的很棒检诗！

媒體查詢是做此事所需的最強大的工具匈仗。讓我們使用百分比寬度來布局，然后在瀏覽器變窄到無法容納側邊欄中的菜單時逢慌，把布局顯示成一列：

@media screen and (min-width:600px) {
  nav {
    float: left;
    width: 25%;
  }
  section {
    margin-left: 25%;
  }
}
@media screen and (max-width:599px) {
  nav li {
    display: inline;
  }
}

媒體查詢

額外加分點

使用 meta viewport 之后可以讓你的布局在移動瀏覽器上顯示的更好忙菠。

4.7 inline-block

你可以創(chuàng)建很多網格來鋪滿瀏覽器何鸡。在過去很長的一段時間內使用 float 是一種選擇，但是使用 inline-block 會更簡單牛欢。讓我們看下使用這兩種方法的例子：

4.7.1 困難的方式（使用浮動）

.box {
  float: left;
  width: 200px;
  height: 100px;
  margin: 1em;
}
.after-box {
  clear: left;
}

困難的方式：使用浮動

4.7.2容易的方式（使用 inline-block）

你可以用 display 屬性的值 inline-block 來實現相同效果。

容易的方式：inline-block

4.8 inline-block 布局

你可以使用 inline-block 來布局访得。有一些事情需要你牢記：

• vertical-align 屬性會影響到 inline-block 元素龙亲，你可能會把它的值設置為 top 。
• 你需要設置每一列的寬度
• 如果HTML源代碼中元素之間有空格，那么列與列之間會產生空隙局

nav {
  display: inline-block;
  vertical-align: top;
  width: 25%;
}
.column {
  display: inline-block;
  vertical-align: top;
  width: 75%;
}

inline-block布局

五鳄炉、CSS新屬性column

這里有一系列新的CSS屬性杜耙，可以幫助你很輕松的實現文字的多列布局。讓我們瞧瞧：

.three-column {
  padding: 1em;
  -moz-column-count: 3;
  -moz-column-gap: 1em;
  -webkit-column-count: 3;
  -webkit-column-gap: 1em;
  column-count: 3;
  column-gap: 1em;
}

image.png

六榕订、 flexbox布局

新的 flexbox 布局模式被用來重新定義CSS中的布局方式。很遺憾的是最近規(guī)范變動過多蜕便，導致各個瀏覽器對它的實現也有所不同劫恒。不過我仍舊想要分享一些例子，來讓你知道即將發(fā)生的改變轿腺。這些例子目前只能在支持 flexbox 的 Chrome 瀏覽器中運行两嘴，基于最新的標準。

網上有不少過時的 flexbox 資料族壳。 如果你想要了解更多有關 flexbox 的內容憔辫，從這里學習如何辨別一份資料是否過時。我已經寫了一份關于最新標準的詳細文章仿荆。

使用flexbox你還可以做的更多贰您；這里只是一些讓你了解概念的例子：

使用 Flexbox 的簡單布局

.container {
  display: -webkit-flex;
  display: flex;
}
nav {
  width: 200px;
}
.flex-column {
  -webkit-flex: 1;
          flex: 1;
}

flexbox的簡單布局

使用 Flexbox 的牛逼布局

.container {
  display: -webkit-flex;
  display: flex;
}
.initial {
  -webkit-flex: initial;
          flex: initial;
  width: 200px;
  min-width: 100px;
}
.none {
  -webkit-flex: none;
          flex: none;
  width: 200px;
}
.flex1 {
  -webkit-flex: 1;
          flex: 1;
}
.flex2 {
  -webkit-flex: 2;
          flex: 2;
}

flexbox的牛逼布局

使用 Flexbox 的居中布局

.vertical-container {
  height: 300px;
  display: -webkit-flex;
  display:         flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
}

flexbox居中布局