界面設計技法之佈局

css佈局之於頁面就如同ECMAScript之於JS通常，細想一番，html就如同語文，css就如同數學，js呢，就是物理，有些扯遠，這裏就先不展開了。 回到主題，從最開始的css到現在的sass(less),開發的效率確實變得愈來愈高效，可是可能有時候咱們仍是會對頁面佈局產生煩惱的情緒，好比:"咦？我想讓它顯示在這個部位，它一點都不聽話啊"。很大緣由在於咱們可能沒對css佈局這塊作一個系統的梳理~，偶然間發現了Learn CSS Layout，在此分享給你們，但願和你們共同提升，另外安利給你們一個如何寫出更加優雅的html&&css代碼的文章，使勁戳我!

填坑"display"

display 是CSS中最重要的用於控制佈局的屬性。每一個元素都有一個默認的 display 值，這與元素的類型有關。對於大多數元素它們的默認值一般是 block 或 inline 。一個 block 元素一般被叫作塊級元素。一個 inline 元素一般被叫作行內元素。

block：

div 是一個標準的塊級元素。一個塊級元素會新開始一行而且儘量撐滿容器。其餘經常使用的塊級元素包括 p 、 form 和HTML5中的新元素： header 、 footer 、 section 等等。

 

inline:

span 是一個標準的行內元素。一個行內元素能夠在段落中 <span> 像這樣 </span>包裹一些文字而不會打亂段落的佈局。 a 元素是最經常使用的行內元素，它能夠被用做連接。

 

none:

另外一個經常使用的display值是 none 。一些特殊元素的默認 display 值是它，例如 script。 display:none 一般被 JavaScript 用來在不刪除元素的狀況下隱藏或顯示元素。

它和 visibility 屬性不同。把 display 設置成 none 不會保留元素本該顯示的空間，可是 visibility: hidden; 還會保留。

擴展:

每一個元素都有一個默認的 display 類型。不過你能夠隨時隨地的重寫它！常見的例子是：把 li 元素修改爲 inline，製做成水平菜單。

*inline-block佈局

把inline-block單獨拎出來說，說來慚愧，很長一段時間我都是蒙着用它的，對於block、inline、inline-block的區別我本身總結了一句話

block:有寬高，不在同一行； inline:同一行，無寬高； inline-block: 有寬高又在同一行

這算是個小插曲吧，接着咱們的佈局之旅；在此以前，讀者需能夠先閱讀下文的float佈局和clear的知識再回頭來看這知識會容易很多，而後咱們會對比inline-block佈局相對於float佈局的優點；

困難的方式（float佈局）

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

.box 我在浮動

.box 我在浮動

.box 我在浮動

.box 我在浮動

.box 我在浮動

.box 我在浮動

.box 我在浮動

.box 我在浮動

.box 我在浮動

.box 我在浮動

.box 我在浮動

.after-box 我在使用 clear，因此我不會浮動到上面那堆盒子的旁邊。 

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

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

.box2 {
  display: inline-block;
  width: 200px;
  height: 100px;
  margin: 1em;
}

.box2 我是一個行內塊！

.box2 我是一個行內塊！

.box2 我是一個行內塊！

.box2 我是一個行內塊！

.box2 我是一個行內塊！

.box2 我是一個行內塊！

.box2 我是一個行內塊！

.box2 我是一個行內塊！

.box2 我是一個行內塊！

.box2 我是一個行內塊！

.box2 我是一個行內塊！

此次我可沒有用 clear 。太棒了！

使用inline-block佈局的注意項:

①vertical-align 屬性會影響到 inline-block 元素，你可能會把它的值設置爲 top 。
②你須要設置每一列的寬度
③若是HTML源代碼中元素之間有空格，那麼列與列之間會產生空隙

 

你得作些額外工做來讓IE6和IE7支持 inline-block 。有些時候人們談到 inline-block 會觸發叫作 hasLayout 的東西，你只須要知道那是用來支持舊瀏覽器的。若是你對此很感興趣，能夠在後面的連接中找到更詳細的信息。

margin:auto&&max-width

margin:auto:

#main {
  width: 600px;
  margin: 0 auto; 
}

設置塊級元素的 width 能夠阻止它從左到右撐滿容器。而後你就能夠設置左右外邊距爲 auto 來使其水平居中。元素會佔據你所指定的寬度，而後剩餘的寬度會一分爲二成爲左右外邊距。

惟一的問題是，當瀏覽器窗口比元素的寬度還要窄時，瀏覽器會顯示一個水平滾動條來容納頁面。讓咱們再來改進下這個方案...

max-width:

#main {
  max-width: 600px;
  margin: 0 auto; 
}

在這種狀況下使用 max-width 替代 width 可使瀏覽器更好地處理小窗口的狀況。這點在移動設備上顯得尤其重要，調整下瀏覽器窗口大小檢查下吧！

順便提下， 全部的主流瀏覽器包括IE7+在內都支持 max-width ，因此放心大膽的用吧。

盒模型

在咱們討論寬度的時候，咱們應該講下與它相關的一個重點知識：盒模型。當你設置了元素的寬度，實際展示的元素卻可以超出你的設置：由於元素的邊框和內邊距會撐開元素。看下面的例子，兩個相同寬度的元素顯示的實際寬度卻不同。

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

.fancy {
  width: 500px;
  margin: 20px auto;
  padding: 50px;
  border: 10px #6AC5AC solid;
}

class="simple":

我小一些...

class="fancy":

 我比它大！

之前有一個代代相傳的解決方案是數學。CSS開發者須要用比他們實際想要的寬度小一點的寬度，須要減去內邊距和邊框的寬度。值得慶幸地是你不須要再這麼作了，讓咱們接着看...

※box-sizing※

這個部分是我着重向你們分享的知識點，由於本身之前沒掌握o(╯□╰)o，推薦你們多用用box-sizing屬性；

通過了一代又一代人們意識到數學很差玩，因此他們新增了一個叫作 box-sizing 的CSS屬性。當你設置一個元素爲 box-sizing: border-box; 時，此元素的內邊距和邊框再也不會增長它的寬度。這裏有一個與前一頁相同的例子，惟一的區別是兩個元素都設置了 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: 10px #6AC5AC solid;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

class="simple":

咱們如今同樣大小了！ 

class="fancy": 

 萬歲！

既然沒有比這更好的方法，一些CSS開發者想要頁面上全部的元素都有如此表現。因此開發者們把如下CSS代碼放在他們頁面上： 

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

既然 box-sizing 是個很新的屬性，目前你還應該像我以前在例子中那樣使用 -webkit- 和 -moz- 前綴。這能夠啓用特定瀏覽器實驗中的特性。同時記住它是支持IE8+。

position佈局

爲了製做更多複雜的佈局，咱們須要討論下 position 屬性。它有一大堆的值，名字還都特抽象，別提有多難記了。讓咱們先一個個的過一遍,不過你最好仍是把這頁放到書籤裏。

static:

.static {
  position: static;
}

 static 是默認值。任意 position: static; 的元素不會被特殊的定位。一個 static 元素表示它不會被「positioned」，一個 position 屬性被設置爲其餘值的元素表示它會被「positioned」。

relative: 

relative是我項目裏用到的最多的屬性了，它一般和絕對定位相結合；

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

relative1 表現的和 static 同樣，除非你添加了一些額外的屬性。 

在一個相對定位（position屬性的值爲relative）的元素上設置 top、 right 、 bottom 和 left 屬性會使其偏離其正常位置。其餘的元素則不會調整位置來彌補它偏離後剩下的空隙。

fixed:

一個固定定位（position屬性的值爲fixed）元素會相對於視窗來定位，這意味着即使頁面滾動，它仍是會停留在相同的位置。和 relative 同樣， top 、 right 、 bottom和 left 屬性均可用。

一個固定定位元素不會保留它本來在頁面應有的空隙。

使人驚訝地是移動瀏覽器對 fixed 的支持不好。這裏有相應的解決方案.

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;
}

這個元素是相對定位的。若是它是 position: static; ，那麼它的絕對定位子元素會跳過它直接相對於body元素定位。

 

 

這個元素是絕對定位的。它相對於它的父元素定位。

給想練手的新同窗留個小做業吧，用relative+absolute實現出下面這個簡單的登陸Demo，後期貼上源碼；

以上這部分可能有些難理解，但它是創造優秀佈局所必需的知識。

float佈局

另外一個佈局中經常使用的CSS屬性是 float 。Float 可用於實現文字環繞圖片，以下：

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

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.

 *clear

clear 屬性被用於控制浮動。比較下面兩個例子：(貌似博客園不支持<section>標籤,代碼裏我用<div>代替，你們懂意思就行)

<div class="box">我感受好像我在漂浮！</div>
<section> 在這個例子中，  元素其實是在  以後的（譯註：DOM結構上）。然而  元素是浮動到左邊的，因而  中的文字就圍繞了  ，而且  元素包圍了整個元素。若是咱們想讓  顯示在浮動元素以後呢？</section>sectiondivdivsectiondivsectionsection

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

div class="box" 我感受好像我在漂浮！

section  在這個例子中， section 元素其實是在 div 以後的（譯註：DOM結構上）。然而 div 元素是浮動到左邊的，因而 section 中的文字就圍繞了 div ，而且 section 元素包圍了整個元素。若是咱們想讓 section 顯示在浮動元素以後呢？

 

  

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

div class="box" 我感受好像我在漂浮！

section class="after-box" 使用 clear 咱們就能夠將這個段落移動到浮動元素 div 下面。你須要用 left 值才能清除元素的向左浮動。你還能夠用 right 或 both 來清除向右浮動或同時清除向左向右浮動。

 *清除浮動(clearfix hack)

img {
  float: right;
}

不......這個圖片比包含它的元素還高， 並且它是浮動的，因而它就溢出到了容器外面！

 

見證奇蹟的時刻到了！有一種比較醜陋的方法能夠解決這個問題，它叫作清除浮動（clearfix hack）.

讓咱們加入一些新的CSS樣式：

.clearfix {
  overflow: auto;
}

如今再看看發生了什麼：

<div class="clearfix"> 好多了！

 這個能夠在現代瀏覽器上工做。若是你想要支持IE6，你就須要再加入以下樣式：

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

有些獨特的瀏覽器須要「額外的關照」。清除浮動這譚水很深很深，可是這個簡單的解決方案已經能夠在今天全部的主要瀏覽器上工做。

百分比寬度佈局

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

article img {
  float: right;
  width: 50%;
}

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

你能夠用百分比作佈局，可是這須要更多的工做。總而言之，選一種最合適你的內容的方式。附上以前作的一個用百分比作佈局的項目。

這是微信端的展現，從中咱們能夠看出若是用百分比佈局來作界面比較明朗的界面的話，那在兼容多種終端上，它能幫咱們省下很多力氣，另外該項目已經開源，喜歡的朋友能夠去star一下喲；項目地址

媒體查詢

「響應式設計（Responsive Design）」是一種讓網站針對不一樣的瀏覽器和設備「響應」不一樣顯示效果的策略，這樣可讓網站在任何狀況下顯示的很棒！

媒體查詢是作此事所需的最強大的工具。

如今咱們的佈局在移動瀏覽器上也顯示的很棒。這裏有一些一樣使用了媒體查詢的著名站點。在MDN文檔中你還能夠學到更多有關媒體查詢的知識。

demo
@media screen and (min-width:640px) {
  ...  
}
@media screen and (max-width:768px) {
  ...  
}

補充：使用 meta viewport 以後可讓你的佈局在移動瀏覽器上顯示的更好。

使用方法：<meta name=」viewport」 content=」」 />

在實際項目中，爲了讓Responsive設計在智能設備中能顯示正常，也就是瀏覽Web頁面適應屏幕的大小，顯示在屏幕上，能夠經過這個可視區域的meta標籤進行重置，告訴他使用設備的寬度爲視圖的寬度，也就是說禁止其默認的自適應頁面的效果，具體設置以下：

<meta name=」viewport」 content=」width=device-width,initial-scale=1.0」 />

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;
}

爲了能在Web頁面中方便實現相似報紙、雜誌那種多列排版的佈局，W3C特地給CSS3增長了一個多列布局模塊（CSS Multi Column Layout Module）。它主要應用在文本的多列布局方面，這種佈局在報紙和雜誌上都使用了幾十年了，但要在Web頁面上實現這樣的效果仍是有至關大的難度，爲此W3C特地給CSS3增長了一個多列布局模塊（CSS Multi Column Layout Module）。

CSS columns是很新的標準，因此你須要使用前綴，而且它不被IE9及如下和Opera Mini支持。還有許多和 column 相關的屬性，點擊這裏瞭解更多。 

flexbox佈局

新的 flexbox 佈局模式被用來從新定義CSS中的佈局方式。很遺憾的是最近規範變更過多，致使各個瀏覽器對它的實現也有所不一樣。此次分享一些例子，來讓你知道即將發生的改變。這些例子目前只能在支持 flexbox 的 Chrome 瀏覽器中運行，基於最新的標準。

網上有很多過期的 flexbox 資料。 若是你想要了解更多有關 flexbox 的內容，從這裏學習如何辨別一份資料是否過期。或者查看關於最新標準的詳細文章。 

使用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;
}

.initial 空間足夠的時候，個人寬度是200px，若是空間不足，我會變窄到100px，但不會再窄了。

.none 不管窗口如何變化，個人寬度一直是200px。

.flex1 剩餘寬度的1/3。

.flex2 我會佔滿剩餘寬度的2/3。

使用Flexbox的居中佈局

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

 CSS裏總算是有了一種簡單的垂直居中佈局的方法了！

寫在最後

再次感謝Learn CSS Layout 的做者，給咱們帶來了如此絕妙的css佈局盛宴，同時也感謝敏明君和sunnylost的翻譯，在以上前輩力做的基礎上，云云加了很多我的觀點，若有不當，還請博友們指出。原做是如此優秀，忍不住讓云云連續花了6個多小時，整理並手敲實現了每行樣式代碼。真心建議有時間的朋友能好好閱讀下原文以及其中諸多的超棒的連接，無論對知識的鞏固亦或是進階必定大有裨益！最後，十分感謝朋友們的閱讀，望與你們共同提升！