css 淺析display屬性

繼續開始個人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%，除非設定一個寬度

請重點關注一下加粗的部分。

（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