繼續開始我的css之旅吧。今天我們來說什么啊。構思了兩天還是沒有什么思路，但是學習的步伐我們不能停止下來。還是按照之前的計划來講講display,在講這個之前我們還是按照老規矩來扯扯蛋,步子不能夠邁大了。廢話不說了。
問大家一個問題哈？塊級元素和行級元素，你們知道嗎？
什么是塊級元素了？(div)是塊級元素 什么是行級元素？（span）你能看出他們兩則的區別嗎？ 先上圖
可能有時候大家不是特別的注意他們直接的區別。下面我們來說一下他們具體的特性：
塊級元素：
1：塊級元素會獨占一行，其寬度自動填滿其父元素寬度
2 ：塊級元素可以設置 width, height屬性。【注意：塊級元素即使設置了寬度，仍然是獨占一行的】
3：塊級元素可以設置margin 和 padding。
行級元素：
1：行內元素不會獨占一行，相鄰的行內元素會排列在同一行里，知道一行排不下，才會換行，其寬度隨元素的內容而變化
2：行內元素設置width, height無效
3： 行內元素的水平方向的padding-left,padding-right,margin-left,margin-right 都產生邊距效果，但是豎直方向的padding-top,padding-bottom,margin-top,margin-bottom都不會產生邊距效果換句話說就是
水平方向有效，豎直方向無效
前面說了一個簡單的例子現在能夠看到他們其中存在的區別了吧。說道這里可能要需要補充 一點就是這個元素是個四不像的東西，可變元素。怎么判斷他到底是什么（
可變元素需要根據上下文的語境來決定他到底是塊還是行）通俗點講：
- 塊級元素一般用來搭建網站架構、布局、承載內容
- 內聯元素一般用來在網站內容中的某些細節或者部位，用以“強調、區分樣式、上標、下標、錨點”等等。
你說了這么多東西和我們要講的東西有半毛錢的關系，下面我們就來說說我們要講的到底有幾毛錢的關系。到底有沒有關系了。如果沒有關系我們說這個又有什么意義。
其實你可以反過來想其實我們整個HTML頁面不就是行級和塊級，最主要的是他們可以通過display:inline|block 相互的轉換，現在知道他們有什么卵關系了吧。
既然有關系了，那我們就需要好好的理一理他們直接深刻的關系。有沒有很激動啊。
其實他們的關系很復雜我們就講講幾個比較簡單的比較常用的，如果要深究的話建議自己去看看書.
下面我們來說Display這個東西屬性太多了，沒有辦法一個一個說，我們來說說關鍵的幾個none、block、inline、inline-block，其實也是平時我們說的最多的。
（1）：inline
這個就是文字和圖片會經常用到的，我們可以打一個比方就是，他就是瓶子里面的液體，液體的特點就是沒有形狀沒有大小的。他的大小完全是由裝他的容器來決定的。
其實塊和行是可以相互切換的，但是這里面有問題：
這個屬性用於定義建立布局時元素生成的顯示框類型。對於 HTML 等文檔類型，如果使用 display 不謹慎會很危險，因為可能違反 HTML 中已經定義的顯示層次結構。他會破壞文檔的結構所以請慎用。
哪有人就會問，那如果我要給他設計高度和寬度怎么辦？
其實這個嗎？我們下一章會介紹。這個先給大家看一個效果。如何實現發現沒有float這個屬性
inline元素的特點：
和其他元素都在一行上；
高，行高及頂和底邊距不可改變；
寬度就是它的文字或圖片的寬度，不可改變。
和其他元素都在一行上；
高，行高及頂和底邊距不可改變；
寬度就是它的文字或圖片的寬度，不可改變。
（2）Block:
大家看看和上面的截圖的卻別是什么？內容的寬度？看見沒有。現在能不能夠理解到之前說的他的寬度和高度的區別了。其實我的理解Block就是一個盒子模型，他需要完全遵循盒子模型的特點。不懂得化請參考上一個節。謝謝
Block特點
總是在新行上開始；
高度，行高以及頂和底邊距都可控制；
寬度缺省是它的容器的100%，除非設定一個寬度
高度，行高以及頂和底邊距都可控制；
寬度缺省是它的容器的100%，除非設定一個寬度
請重點關注一下加粗的部分。
（3）：inline-block：
inline-block顧名思義，它既有inline的特性，又有block的特性，大家可以想想一般的button、input是什么樣子的。 那button舉例子。我們在頁面中輸入若干個<button>，發現它們是“流”式排列的（可以對比一下若干個<div>的排列方式）。但是針對一個button，我們還可以自定義修改它的形狀，這樣就有“塊”的特征。這個就是我們之前講的四不像。
不知道大家有沒有看出來他的特點啊。就是一個四不像。可是我們會在什么地方使用到了？
1. 按鈕和文字排在一行
2. 按鈕中文字與外邊文字底部自動對齊 這個場景是不是我們經常會遇到啊。
其實我感覺啊只要你理解了這些東西的原來，才能夠真真的使用上。在接下來的時候還會更新。期待下一篇博文吧。不知道大家清楚沒有。謝謝大家看完，廢話很多
參考：http://www.cnblogs.com/wangfupeng1988/p/4317153.html
http://dbear.iteye.com/blog/750950