CSS Display 基本概念
先來認識區塊元素及行內元素：
| 區塊元素 | 行內元素 | |
| 特點 | 1. 總是在新的一行開始。 2. 高度、行高、Padding、Margin 都可以控制。 3. 寬度總是 100%，除非有特別設定它的寬度。 |
1. 和其它元素都在一行線上。 2. 寬度高度皆無法控制。 3. Margin 只有設定左右有效 ; Padding 設定上下左右有效，會撐大空間。 |
| 影響範圍 | 整行都可以點到 | 只能點到元素本身 |
| 標籤 | <DIV>、<H1~H6>、<P>、<UL>、<OL>、<LI>、<DL>、<Dt>、<Dd>、<Table>、<Form>、<Blockquote>、<Pre>... | <A>、<Strong>、<Em>、<Img>、<Input>、<Abbr>、<I>、<Label>、<Select>、<Span>、<B>、<Br>、<Textarea>... |
以下較不常用的只會簡單提過，只會詳細介紹較常用的屬性！！
一、Display-Outside
屬於此種類的屬性有 Block、Inline 以及 Run-In，主要影響元素本身，是寫網頁中最基本的 Display 屬性。
1. Block
區塊元素，總是會以新的一行開始，所以不管你給它設定多少寬度，它基本容器的寬度還是撐滿整個空間，即使視覺上它已經被你調整成50%，它還是不會讓下方的東西排在它的右邊，如下圖：
＊如上圖黃框所示，Block雖然視覺上已經是50％的寬度，但它本身還是會讓物件往下掉一行。
2. Inline
行內元素，又稱線內元素，元素本身的寬高多少它就是多少，也意味著它沒有辦法調整寬高，另外很重要的是它可以設定Padding的上下左右（綠色區域），但唯獨Margin只能設定它的左右（橘色區域），如下圖，但同是Inline屬性的元素默認排列方式為由左到右，直到它裝滿容器才會跳至下一行，如下圖：
如上圖黃框所示，Inline 本身寬高多少，它就是多少，是不能被改變的!
二、Display-Inside
屬於此種類的屬性有 Table、Flex、Flow、Flow-Root、Grid 以及 Ruby，主要影響元素包起來的子元素。
1. Table
可以讓元素直接模擬成 Table 來使用，簡單來說就是把屬性改為表格，並且會讓它的子元素成為表格的一部分，而隸屬於 Table-Internal 的屬性有以下 8 種:
＊Table-Row：對應 <Tr> 標籤。＊Table-Row-Group：對應 <Tbody> 標籤。
＊Table-Column-Group：對應 <Colgroup> 標籤。
為何不直接用<Table>、<Tr>、<Td>...等來做表格呢?因為在某些特定的標籤裡會給它們一些預設的樣式設定，當你改不動時，你可能會再去找樣式是設定在標籤還是 Class 還是 Id，所以用 Div 畫出表格的好處是樣式會比較乾淨，你可以更方便地去修改樣式。
2.Flex
Flex 屬性，是目前最好用的屬性之一，最常用的地方是「Row」。它有非常多的方式來調整內容，以下慢慢介紹它可以用哪些東西來調整內容。
方向性 （Flex-Direction）：
水平方向(瀏覽器預設值)為 Row、Row-Reverse(水平方向的反轉)。
垂直方向為 Column、Column-Reserve(垂直方向的反轉)。
調整內容（justify-content: ）：
改變 Flex 物件在主軸上的對齊(預設為水平方向)。若 Flex-Direction 為 Column，則對齊方向會改為 Y 軸(垂直方向)。
justify-content:flex-start：以起點為基準。
justify-content:flex-end：以尾端為基準。
justify-content:center：以中間為基準。
justify-content:space-between：會將物件依容器大小均分。
justify-content:space-around：會將物件依容器大小均分，並會給左右的空間。
對齊物件（align-items: ）：
改變橫軸上所有 Flex 物件的對齊(預設為垂直方向) 。若 Flex-Direction 為 Column，則對齊方向會改為 X 軸(水平方向)。
align-items:flex-start：以起點為基準。
align-items:flex-end：以尾端為基準。
align-items:center：以中間為基準。
align-items:baseline：以物件基準線為基準。
align-items:stretch：(瀏覽器預設)以起點為基準，但會撐滿容器的空間。
自身對齊（ align-self: ）：
單獨改變物件在橫軸上的對齊(預設為垂直方向) 。若 Flex-Direction 為 Column，則對齊方向會改為 X 軸 (水平方向)。
align-self:flex-start：以起點為基準。
align-self:flex-end：以尾端為基準。
align-self:center：以中間為基準。
align-self:baseline：以物件基準線為基準。
align-self:stretch：(瀏覽器預設)以起點為基準，但會撐滿容器的空間。
Wrap（ Flex 的 Wrap 屬性 ）：
改變 Flex 物件在 Flex 容器中的 Wrap。可設置 Flex-Nowrap(瀏覽器預設)、Flex-Wrap(bootstrap 4 預設)、Flex-Wrap-Reverse。
＊Flex-Wrap-Reverse：裝滿容器會強制斷行，但排列順序是相反的。
三、Global
屬於全域的屬性有 inherit、initial 以及 unset，這些屬性並不是 display 的專利，幾乎其他任意屬性都能使用，分別敘述如下：
1. Inherit
不管是哪個屬性，只要設定 Inherit，通通會跟著父層的屬性。父層為 Block 時，子層下 Display:Inherit ; 子 層的屬性也會變為 Block，以此類推。
2. Initial
不管是哪個屬性，只要設定 Initial，通通會變回自己原本的屬性。假如我 div 屬性在某種情況下更改為 inline 屬性，那我後面有吃到同樣 CSS 的 div 想改回 Block，我只要下 Display:Initial，就會變回 Div 原本的 Block 屬 性，但通常這種寫法必須要是很了解每個標籤屬於區塊元素還是行內元素，不然還是建議，你想要讓它是 Block 就 寫 Block，自己才會清楚你給它現在的狀態是什麼。
四、Display-Box
屬於此類型的屬性有 none 以及 content，如字面上意思，主要影響用箱子裝起來的所有元素，敘述如下：
1. None
以常用的 none 來說，假如我的內容物用一個 display : none 的 div 裝起來，那這些內容物會被隱藏起來，且不會佔版面的位置，就這樣被隱藏起來。
重點：相似屬性 visibility:hidden，這邊提出是想讓大家能夠更了解兩種隱藏的手法有哪裡不一樣!
visibility:hidden 內容被隱藏起來，雖然肉眼上看不到他，但會在版面上留下他的位置，就像哈利波特穿隱形斗篷，雖然被隱藏起來但他還是站在那裡一樣哦!
五、Display-Listitem
元素會成為區塊元素，和 block 相似，唯一的差別只差在會在前方多一個列表的符號，如黑點。若想要像 <ul> <li> 一樣有列表樣式必須要另外寫 list-style-position 以及 list-style。
屬於此類型的屬性有 list-item、list-item block、list-item inline、list-item flow、list-item flow-root、list-item block flow、list-item block flow-root 以及 flow list-item block。
六、Display-Legacy
屬於此類型的屬性有 inline-block、inline-table、inline-flex 以及 inline-grid，簡單來說此屬性繼承兩者的優點， 敘述如下:
1. inline-block
繼承了 inline 的屬性，但也繼承了 block 可以設定寬高的屬性，他的效果主要是可以讓許多區塊自動浮起來水平排列，而且不用額外設定 clear 也不會讓接著的元素浮上來蓋住區塊，是個比 inline 的功能還要強大的屬性。
2. inline-table
繼承了inline的屬性，但也繼承了table的屬性，和 display：table 不同的是，一般表格<table>是自成一行的元素，但因為 inline-table 有 inline 的屬性，所以接在他後面的元素也是 inline 屬性就會接在右方，直到裝滿容器才會換行。
3. inline-flex
繼承了 inline 的屬性，但也繼承了flex的屬性，和 display：flex 不同的是，使用 flex 時父元素為 block，inline-flex 則是父元素變成了 inline，它會根據子元素所有的 div 大小自適應寬度和高度。比較圖（皆加了padding:5px）如下：
＊有看出差異嗎?咖啡色底的區塊是父層，裡面內容不變皆屬於 flex 但父層從 block 更改為 inline 了!
以上簡單介紹幾個常用的 display 屬性，希望能幫助大家更了解這個屬性，在網頁排版上更能得心應手～
參考來源：
1. 關於 "Display" 屬性 Http://Zh-Tw.Learnlayout.Com/Display.Html
2. Display Https://Developer.Mozilla.Org/En-US/Docs/Web/CSS/Display
3. CSSDisplayProperty Https://Www.W3schools.Com/Cssref/Pr_Class_Display.Asp
4. CSS Display 属性 Http://Www.W3school.Com.Cn/Cssref/Pr_Class_Display.Asp
5. CSS Display 屬性用法介紹 Display:Block 與 Display:Inline Http://Www.Webtech.Tw/Info.Php?Tid=37
6. CSS 基礎您不能不知道的 Block(塊元素)、Inline(內聯元素)差別 Http://Injerry.Pixnet.Net/Blog/Post/38847454-%5Bcss%E6%95%99%E5%AD%B8%5D--- Css%E5%9F%BA%E7%A4%8E%E6%82%A8%E4%B8%8D%E8%83%BD%E4%B8%8D%E7%9F%A5%E9%81%93%E7%9A%84block%28%E5%A1%8A%E5%85%83%E7%B4%A0%29
7. CSS : Display 屬性-區塊和行內元素差異 Https://Ithelp.Ithome.Com.Tw/Articles/10190772
8. 30 天分享(18) - 行內元素 & 區塊元素 Https://Ithelp.Ithome.Com.Tw/Articles/10160131
9. 行內元素 & 塊級元素 差別 Http://Vincentsu.Tumblr.Com/Post/56128670211/%E8%A1%8C%E5%85%A7%E5%85%83%E7%B4%A0%E5%A1%8A%E7%B4%9A%E5%85%83%E7%B4%A0%E5%B7%AE%E5%88%A5
10. HTML 的 Display 屬性將行內元素、塊狀元素、行內塊狀元素互相轉換以及三者的區別 Https://Hk.Saowen.Com/A/19e0fa02d20441b41cb34ccfc369e178664d84ad2561df60e0982755584ed0af
11.Display 屬性 Https://Bootstrap.Hexschool.Com/Docs/4.0/Utilities/Display/
12.display 的 32 种写法 https://segmentfault.com/a/1190000012833458#ruby
