HTML CSS display


Posted by fang on 2020-07-29

在寫 HTML 的時候,一定不只有一個物件,所以一定會遇到需要將物件排列的時候,此時就是要使用 display 的參數,主要有三種分別是:block, inline ,和 inline-block,在這邊將以兩條 bar 的關係訴說一下這三個參數的差別。

使用上一次文章的例子,我的網頁上長了兩條 bar,程式如下:

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <title>The HTML5 Herald</title>
  <link rel="stylesheet" href="https://necolas.github.io/normalize.css/8.0.1/normalize.css">
  <style>
    .explain {
      background: yellow;
      border: 2px solid black;
      padding: 20px 10px 20px 10px;
      margin: 10px 10px;
    }
  </style>
</head>

<body>
  <div class="explain">
    我是一條 bar!
  </div>
  <div class="explain">
    我是第二條 bar!
  </div>
</body>
</html>

顯示的樣子如下:

其實這樣子就說完了第一個 display 屬性,因為 div 預設的就是 block,它的特性就是什麼屬性調整都沒有問題,而且會佔據一整行,如果要用 word 文件的角度去看它,相較於其他屬性, block 就很像一個段落

如果我把 div 改成 span,預設的 block 就會改成 inline,直接上圖:
(也可以直接在 <style> .explain 中間加上 display: inline;

可以發現我幫物件做的 Padding 和 Margin 上方的部分消失了,而且兩個 bar 並排在一起了,如果單純要去解釋為什麼會變成這樣的話,最好理解的方式也是使用 word 文件的角度去看它,如果說 block 是一個段落,那麼 inline 就是段落中的文字,因為它只是一小段文字,所以兩個 bar 可以並排,就像詞語跟詞語的連接一樣,而上方的部分消失則是因為當一段文字中的兩個詞語長得特別高,其他的詞語行高也會被跟著拉高,但這個屬性並不是拿來拉行高的呀,所以高是不會變的,用這樣的方式就能比較好理解其中的原因。

但是如果我想要兩條 bar 之間的關係像 inline,可以調的參數像 block,結合兩種的長處,這個時候就是使用 inline-block,直接將<style> .explain 中間的 display 修改為 display: inline-block;,顯示圖如下:

如此一來就可以使用 block 的樣子,讓兩條 bar 的關係像 inline 摟!


#display #html #css







Related Posts

D49_W6-HW 們

D49_W6-HW 們

【Vue 學習筆記】元件化

【Vue 學習筆記】元件化

資料傳輸物件與設計模式之間的使用

資料傳輸物件與設計模式之間的使用


Comments