關於display幾個經常使用的屬性值及其之間的相互轉換關係

display定義和用法

定義：display 屬性規定元素應該生成的框的類型。

首先 HTML能夠將元素分類爲行內元素、塊狀元素、行內塊狀元素

其次 要說明的是這三者是能夠相互轉換的，使用display屬性能夠將三者任意轉換。其特色請看文章末尾的概括   (｡♥ᴗ♥｡)

（這個屬性 用於定義創建佈局時元素生成的顯示框類型。對於 HTML 等文檔類型，若是使用 display 不謹慎會很危險，由於可能違反 HTML 中已經定義的顯示層次結構。）

屬性：

1. display:none  顧名思義是指取消display相關指令

2. display:block  會將顯示的元素變成塊級元素，會使先後帶有換行符

<div class="content">
            <span class="one"> 
                1
            </span>
            <span class="two">
                2
            </span>
        </div>

在這麼一段代碼中，<span>元素裏的1和2將會並列排序，若想將兩個元素都變成塊級元素，需在.one和.two的樣式中加入display:block; (注意：這裏注意不要加到外面的塊元素content中，content自己是塊元素，而且與目的將<span>標籤裏的元素變爲塊元素不符 )

display:block前：

display:block後：

3. display:inline : 此元素會被顯示爲內聯元素，元素先後沒有換行符

• 這裏補充一下內聯元素
• 內聯元素的顯示，能夠形象的稱爲「文本模式」，即一個挨着一個，都在同一行按從左至右的順序顯示，不單獨佔一行。
• 一般用於特殊佈局，在同一行顯示多個內容，可使用內聯元素實現，這樣不須要將塊級元素設置爲浮動或絕對定位就能夠在一行橫排排版。

<div class="content">
        <div class="one"> 
            1
        </div>
        <div class="two">
            2
        </div>
    </div>

由於是塊級元素，佔據的寬度是100%，那麼one和two會自動分行，以下圖所示：

display:inline 前：

在這種狀況下，若想使兩個塊級元素在同一行顯示，那麼能夠分別在各自的屬性中加入 display:inline

display：inline 後：

4. display:inline-block :  將轉換爲行內元素

<div class="content">
        <div class="one"> 
            1
        </div>
        <div class="two">
            2
        </div>
    </div>

display:inline-block 會將行內元素或塊狀元素轉換爲行內塊狀元素

display:inline-block  行內元素：

不加的狀態：        

after：                       

display:inline-block 塊狀元素：

不加的狀態：

after：                     

發現：display:inline-block 後的塊大小相等，即爲可以識別寬高

特色概括：

• 行內元素:

  • 設置高寬無效
  • 對 margin僅設置左右方向有效，上下無效. padding上下左右均有效，但會撐大空間
  • 不會自動換行

• 塊狀元素:

  • 可以自動識別寬高
  • margin和padding的上下左右均對其有效
  • 能夠自動換行
  • 多個塊狀元素標籤寫在一塊兒，默認排列方式爲從上至下

• 行內塊狀元素：

  • 不能自動換行
  • 可以識別寬高
  • 默認排列方式爲從左到右

總結：行內塊狀元素綜合了行內元素和塊狀元素的特性，所以行內塊狀元素在平常的使用中因爲其特性，使用的也較多