當您輸入電子信箱、訂閱本公司之「電子報」時，我們會向您蒐集、處理、利用的個資為您的「電子信箱」以及「提交日期」，當您輸入電子信箱並送出時，即表示您同意我們使用您的個資，為保障您的權益，關於更多相關政策更新資訊，請務必閱讀我們的「 隱私權政策 」、「 使用條款 」及「 免責聲明 」。如您不同意本網站之「隱私權政策」、「使用條款」及「 免責聲明」，您可以隨時「 取消訂閱 」，謝謝您。

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>...

1. Block

區塊元素，總是會以新的一行開始，所以不管你給它設定多少寬度，它基本容器的寬度還是撐滿整個空間，即使視覺上它已經被你調整成 50% ，它還是不會讓下方的東西排在它的右邊，如下圖：

＊如上圖黃框所示， Block 雖然視覺上已經是 50 ％的寬度，但它本身還是會讓物件往下掉一行。

2. Inline

行內元素，又稱線內元素，元素本身的寬高多少它就是多少，也意味著它沒有辦法調整寬高，另外很重要的是它 可以設定 Padding 的上下左右（綠色區域），但 唯獨 Margin 只能設定它的左右（橘色區域） ，如下圖，但同是 Inline 屬性的元素默認排列方式為由左到右，直到它裝滿容器才會跳至下一行，如下圖：

二、Display-Inside

屬於此種類的屬性有 Table 、 Flex 、 Flow 、 Flow-Root 、 Grid 以及 Ruby ，主要 影響元素包起來的子元素 。

1. Table

可以讓元素直接模擬成 Table 來使用，簡單來說就是把屬性改為表格，並且會讓它的子元素成為表格的一部分，而隸屬於 Table-Internal 的屬性有以下 8 種:

＊ Table-Row ：對應 <Tr> 標籤。
＊ Table-Row-Group ：對應 <Tbody> 標籤。 ＊ Table-Cell ：對應 <Td> 標籤。 ＊ Table-Caption ：對應 <Caption> 標籤。 ＊ Table-Column ：對應 <Col> 標籤。
＊ Table-Column-Group ：對應 <Colgroup> 標籤。 ＊ Table-Header-Group ：對應 <Thead> 標籤。 ＊ Table-Footer-Group ：對應 <Tfooter> 標籤。

為何不直接用<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-Nowrap ：強制不斷行。 ＊ Flex-Wrap ：裝滿容器會強制斷行。
＊ 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 裝起來，那這些內容物會被隱藏起來，且不會佔版面的位置，就這樣被隱藏起來。

重點： 相似屬性 ，這邊提出是想讓大家能夠更了解兩種隱藏的手法有哪裡不一樣!

內容被隱藏起來，雖然肉眼上看不到他，但會在版面上留下他的位置，就像哈利波特穿隱形斗篷，雖然被隱藏起來但他還是站在那裡一樣哦!

五、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