學習CSS佈局

"display"屬性

在控制佈局方面,display是最重要的css屬性，每一個元素都有其默認的display屬性值，大部分的默認值不是block就是inline，用block標記的元素一般稱爲塊級元素，而用inline的元素一般稱爲內聯元素。

block

Div標籤是塊級元素的代表，塊級元素佔據着整整獨立的一行，其他常見的塊級元素有p和form，還有html5中加入的header，section和footer等等。

inline

Span標籤是內聯元素的代表，內聯元素能夠避免破壞段落結構的情況下，往其中添加文本段落。而元素a就是最常見的內聯元素，經常用他來作鏈接使用。

none

另一個比較常見的display屬性值就是none，像script這些比較特別的元素的默認屬性值就是none，他經常被用來隱藏javascript語句，適當隱藏暫時不用着顯示的元素.但這區別於visibility。設置display：none的元素，經過頁面的渲染過後，就好像這個元素不存在了。而設置visibility：hidden；的時候，同樣會對該元素進行隱藏，但是，如果他被完全隱藏的時候，其依然還是佔據原來的空間。換句話說 display：none會真的把你弄沒，而visibility：hidden則僅僅是爲你披上一件隱身衣而已，你還在原來的地方呆着。

其他display屬性

除了上面講到的display屬性值之外，其實還有很多display屬性值，比如list-item以及table這些。（鏈接）這裏有一個詳盡的列表。我們接下來還會討論到inline-block和flex，敬請期待。

正如我所提到的，每一個元素都具備一個默認的的display屬性值。其實你完全可以忽略這句話！雖然說div在默認情況下不可能是內聯的，但是你定製出你想要的display屬性值元素。舉個常見的例子來說吧，li內聯元素常常被用作水平的菜單。

 

margin: auto;

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

 

在塊級元素中設計width屬性能夠防止在水平上撐滿容器。然後，你還能夠設置左右margin來進行水平居中。在中間佔據指定的水平寬度，然後剩下來的寬度空間就會一分爲二成爲左右外邊距。

現在唯一需要解決的問題就是，一旦瀏覽器的顯示窗口的寬度小於你設定的元素寬度。瀏覽器就會自動加上一個水平滾動條來進行內容顯示，有時這種情況不是我們想要的，需要改進改進。

 

Max-width

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

 

使用max-width來代替width能夠提升瀏覽器對小窗口情況的處理效果。這個處理方法在移動端上顯得更加尤爲重要。現在你就可以調整下窗口的大小，來對照下吧！

Box模型

當我們談及width的時候，我們應該談論到關於width一個重要的注意點，box模型。當你在元素中設定width，該元素的實際大小一般大於你的所設定的數值：元素的border以及padding會在原設定寬度的大小上進一步撐大容器的寬度。看看下面的例子，兩個設定相同width大小的容器，卻是以不同大小的形式顯示出來。

一般來說，我們需要通過計算來解決這個問題，css開發者總是需要預先把容器設定得小一點（減去border以及padding佔據的寬度）來最終達到理想的大小，讓人慶幸的是，現在你再也不用這麼苦逼了。

Box-sizing

隨着日子一天一天過，人們越來越發現爲容器的大小計算得非常苦逼，於是，一個名字叫box-sizing的css屬性新鮮出爐了。當你在容器當中設定box-sizing：border-box的時候，容器中的border和padding已經不能影響該容器的寬度了。下面的例子和上面的例子大部分都一樣，只是下面的例子多了個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;
}	 {
  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;
}	

這是目前爲止保持寬度大小一致最好的解決辦法了，css開發者把下面css代碼放在他們的頁面上，這樣，頁面上所有容器都具備這種屬性了。

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}	
{
  -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;
}	
 {
  position: static;
}	

Static是元素與生俱來的默認屬性。它表示着不進行特殊的定位。一般來說static屬性表示該元素沒有被定位，而一旦把position屬性設定其他值的時候，那麼就表示該元素被定位了。

relative

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

relative表現跟staitc一樣，除非你另外添加了其他的屬性。

在相對（position：relative）定位的元素中設定top，left，right，bottom屬性都會使得改元素的位置發生改變。而且其他內容的位置不會因爲該元素位置的改變而改變。

fixed

Fixed屬性值的元素相對於視窗進行相對定位，也就是不管你的滾動條滾到哪裏去，該元素總會出現在屏幕的相同位置。和position一樣，屬性top，right，bottom和left都會用上。

我想你一定注意到了在屏幕的右下方的fixed屬性。好吧，現在你可以仔細地研究研究它了，下面是相關的css代碼。

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

一個fixed元素不會影響其在頁面中的已經定位了的佈局。然而移動端的瀏覽器對fixed屬性的支持卻表現得很差勁，這裏有相應的解決方案。

absolute

Absolute是最複雜的position屬性值了，absolute跟fixed相似，只是fixed相對於視窗進行定位，而absolute則是相對於最近的一個父系定位元素進行定位而已，如果absolute沒有父系定位元素的話，那麼他就相對文檔中的body元素，也就是說會跟隨頁面的滾動而移動。記住，被定位元素就是那些具備position屬性且屬性值不爲static的元素。

下面是一個簡單的例子

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

class=“relative”，改元素屬於相對定位。如果該元素設定爲position：static；那麼其子系絕對定位就不會脫離該元素，而跑去跟body對齊了。

class=“absolute”：該元素屬於絕對定位，相對於其父系進行定位。

這個東西非常棘手，但要想弄出一個優秀的css佈局你就必須學習它。下面，將給大家帶來關於position更多優秀的例子。

float

另一個要介紹的css佈局屬性就是float。Float可以實現文字在圖片周圍浮動的效果，如下圖所示。

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

clear
Clear就是一個控制float的一個有用屬性，
在這個例子中， section 元素實際上是在 div 之後的（譯註：DOM結構上）。然而 div 元素是浮動到左邊的，於是 section 中的文字就圍繞了 div ，並且 section 元素包圍了整個元素。如果我們想讓 section 顯示在浮動元素之後呢？


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