在認識了normal flow中BFC與IFC的概念後，我們要來認識以這兩個佈局規則為基準的display屬性。display屬性也有特殊的佈局如flex及grid等，但不在此筆記範圍。
CSS的Display屬性可以改變元素對外所參與的佈局環境（outer display type），例如：
inlineblock也可以為元素創造內部的佈局環境，提供後代元素佈局的規則（inner display type）。對內創造的佈局例如：
flow layoutflow rootflow root，一個新的normal flow佈局。flexgrid
這篇僅選擇 none ｜ contents | inline ｜ block ｜ inline-block 來介紹
display: block我們以<header>跟<div>元素來說明，這兩個元素都是block-level element，它們都是預設display: block。
html：
<header></header>
<div>阿囉哈</div>
<header></header>
css：兩個元素的預設都是display: block，所以不再累贅聲明一次。
header {
width: 300px;
height: 50px;
border: 5px solid;
}
div {
width: 300px;
height: 50px;
background-color: green;
}
它們的box佔滿<body>作為block container的寬度，並垂直向下排列。width跟height的聲明也都有效。
display: none同樣的條件，對<div>元素聲明：
div {
display: none;
}
<div>的box被忽略，不予顯示
display: contents相同條件下，對<div>元素聲明：
div {
display: contents;
}
<div>的box被取代成只有contents area的box，只顯示內容文字。
display: inline相同條件下，對所有元素聲明：
header {
display: inline;
}
div {
display: inline;
}
<div>及<header>成為inline box，參與IFC，一個接一個水平排列，且width及height聲明無效。
display: inline-block相同條件下，對所有元素聲明：
header {
display: inline-block;
}
div {
display: inline-block;
}
<div>及<header>對外參與IFC佈局，對內創建了BFC佈局，成為一個block container，width與height聲明有效。
而<div>及<header>內部就是一個新的normal flow的環境，block box參與BFC ; inline box參與IFC：
<header>
<span>你好</span>
<span>你好</span>
<span>你好</span>
<p>三瓦滴咖</p>
</header>
<div>
...
</div>
<header>
...
</header>
CSS的display屬性筆記告一段落，接下來我們會認識讓元素脫離normal flow（out of flow）的float屬性，以及其定位參數，那就明天見～
*有任何錯誤或描述不夠精準之處，歡迎指教，非常感謝。
參考資料
CSS Display Module Level 3-2. Box Layout Modes: the display property
iThome鐵人賽
看影片追技術