※ Display介紹：
說明：展示的屬性的意思，就是來決定元素在瀏覽器中如何呈現的方式。
※ Display展示屬性：
有以下幾種設定：
- block：在預設的情況下，div和paragraph的標籤預設的display都是block。
- inline-block：讓元素可以排在同一個行內的區塊，但同時也保有 block 元素的寬高設定能力。
index.html：
<body>style.css：
<div class="colorpalette">
<!-- 依序建立色票卡 -->
<p class="color color1">#372C4A</p>
<p class="color color2">#4F3961</p>
<p class="color color3">#EA728C</p>
<p class="color color4">#FC9D9D</p>
<p class="color color5">#F3D4D4</p>
</div>
<div class="colorpalette">
<!-- 依序建立色票卡 -->
<p class="color color1">#372C4A</p>
<p class="color color2">#4F3961</p>
<p class="color color3">#EA728C</p>
<p class="color color4">#FC9D9D</p>
<p class="color color5">#F3D4D4</p>
</div>
<div class="colorpalette">
<!-- 依序建立色票卡 -->
<p class="color color1">#372C4A</p>
<p class="color color2">#4F3961</p>
<p class="color color3">#EA728C</p>
<p class="color color4">#FC9D9D</p>
<p class="color color5">#F3D4D4</p>
</div>
<div class="colorpalette">
<!-- 依序建立色票卡 -->
<p class="color color1">#372C4A</p>
<p class="color color2">#4F3961</p>
<p class="color color3">#EA728C</p>
<p class="color color4">#FC9D9D</p>
<p class="color color5">#F3D4D4</p>
</div>
</body>
.colorpalette {
/* border: 5px solid #000; */
width: 400px;
background-color: rgb(173, 148, 148);
box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.5);
display: inline-block;
}
畫面顯示：
使用inline-block的缺點：
產生4px間隔的原因：
解決4px間隔的方式：
index.html：
<body>
<!-- 建立一個大盒子 -->
<div class="colorpalette">
<!-- 依序建立色票卡 -->
<p class="color color1">#372C4A</p>
<p class="color color2">#4F3961</p>
<p class="color color3">#EA728C</p>
<p class="color color4">#FC9D9D</p>
<p class="color color5">#F3D4D4</p>
</div
><div class="colorpalette">
<!-- 依序建立色票卡 -->
<p class="color color1">#372C4A</p>
<p class="color color2">#4F3961</p>
<p class="color color3">#EA728C</p>
<p class="color color4">#FC9D9D</p>
<p class="color color5">#F3D4D4</p>
</div
><div class="colorpalette">
<!-- 依序建立色票卡 -->
<p class="color color1">#372C4A</p>
<p class="color color2">#4F3961</p>
<p class="color color3">#EA728C</p>
<p class="color color4">#FC9D9D</p>
<p class="color color5">#F3D4D4</p>
</div>
</body>
畫面顯示：
出現參差不齊的排版：
原因在於：
- 文字內容數量不一定。
- 內建屬性：使用基準線對齊。
index.html：
><div class="colorpalette">
<!-- 依序建立色票卡 -->
<p class="color color1">#372C4A</p>
<p class="color color2">#4F3961</p>
<p class="color color3">#EA728C</p>
<p class="color color4">#FC9D9D</p>
<p class="color color5">#F3D4D4</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi provident ea quas quia deleniti! Quisquam ut magni quidem pariatur voluptatem aperiam. Repellendus, dicta non suscipit pariatur harum ducimus voluptatibus nesciunt?</p>
</div>
畫面顯示：
解決參差不齊的排版的方式：
多設一個屬性：vertical-align；預設值是baseline。
style.css：
.colorpalette {
/* border: 5px solid #000; */
width: 400px;
background-color: rgb(173, 148, 148);
box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.5);
display: inline-block;
vertical-align: top;
}
畫面顯示：
- inline：
說明：
- 定義了元素的排版方式。
- 與文字一起排列：像是文字、連結(<a>)、 粗體字 (<strong>)等會像句子的一部分那樣排列。
- 不換行：除非內容過長或遇到 <br>，不然不會自己換行。
- 無法設定寬高：width 和 height 通常無效。
- 內距（padding）與邊框（border）只影響上下內容有限。
.btn{
border: 1px solid #000;
width: 100px;
height: 100px;
}
畫面顯示：沒有任何改變
inline的屬性限制：
style.css：增加argin
margin: 60px;
畫面顯示：
style.css：增加display
display: inline-block;
畫面顯示：
- none：消失的意思。不會顯示在畫面上，不佔據任何空間，無法被使用者互動。
- 常見用途：可用在隱藏跳出廣告、選單、提示訊息。
畫面顯示：
※ Display重點回顧：
block：
- 在一些分割之類的標籤上是預設的，常見的區塊元素像是 <div>、<p>、<section> 等。
- 特性：會讓元素獨占一整行，並自動撐滿容器的寬度。
inline-block：
- 可以很方便設定他的屬性：例如設定
width和height。 - 特性：不會強制換行。元素會沿著同一行排列，直到空間不足才換行。
inline-block缺點：
- 4px的間隔。用html的結構去做修正。
- 排版參差不齊。寫vertical-align去強制它向上、向下或是中間去做對齊。
inline：
特性：像文字一樣的排版，然後會去做斷行。
限制：在寬度、高度設定、margin-top、margin-bottom這些效果都會失效。
預設元素：<a>、<span>、<img>、表單輸入…等。
none：
特性：讓元素消失在介面上，html結構中還是會存在。
