▍ block-level element （像水一樣的區塊元素 💦）
進入 width、max-width、min-width 筆記前，再複習一次 block-level element 的特性：區塊元素會盡可能向左和向右延伸，佔據可用的全部寬度。
因此，為 block-level element 設定寬度，可以防止它延伸到其容器的邊緣。
且 block-level element 將依據不同寬度屬性設定，來佔據指定的寬度！
如下圖，沒有設定寬度屬性的區塊元素，會竭盡所能的向左向右不斷延伸，但有被設定寬度屬性的區塊元素，就會像被裝進容器的水一樣，不能動彈 ↓
區塊元素與寬度
寬度要怎麼設定呢？下面開始筆記「width、max-width、min-width」三種不同的寬度屬性設定！
▍➊ width 屬性
CSS width Property
width 用來設定元素的寬度，但 width 不會把 padding、border、margin 所佔據的面積也算進去，如果設定一個元素為 width: 500px; 時，則 width 作用範圍僅在 content-box 區塊↓：
盒模型
※ 注意：min-width 和 max-width 屬性會覆寫 width 屬性。
將容器設定 width: 1000px;，伸縮瀏覽視窗時，變化如下↓：
當瀏覽視窗伸縮至小於解析度 1000px 時，帶有 width: 1000px; 的容器仍不被壓縮大小，且瀏覽器產生捲軸 Scrollbar。
閱讀 w3schools CSS width Property
▍➋ max-width 屬性
CSS max-width Property
max-width 用來設定元素的最大寬度，當一個容器被設為 max-width: 500px; 時，放在容器裡的 <p> 文字段落，無論字數有多少字，<p> 都會被限制在 max-width: 500px; 這個空間裡面，如下↓：
而當拉寬瀏覽器視窗時，被設為 max-width: 500px; 的容器以及放在容器裡的<p>，依舊會被限制在這個寬度裡面，不會因為視窗變寬而改變寬度。
而且，當縮小瀏覽器，使視窗螢幕解析度小於 500px 時，帶有 max-width: 500px; 的容器以及放在容器裡的 <p>，會跟著容器的寬度自適應縮小，如下↓：
▍➌max-width 和 width 的差異：
max-width 會迎合外層容器，若在 .container 設置 max-width: 1200px;，則 .container 最大寬度為 1200px，不會因為拉大視窗使 .container 超出 1200px，而當視窗縮小時，.container 則跟著父層容器自適應縮小。
相反的，width 不能自適應，鎖死寬度的情況下，當縮小視窗時就會出現 x 軸。
（ x軸 = 捲軸 Scrollbar ）
▍➍ min-width 屬性
CSS min-width Property
min-width 用來設定元素的最小寬度，當一個容器被設為 min-width: 1000px; 時，容器以及放在容器裡的 <p> 文字段落將被限制在這個最小寬度裡。
而當瀏覽視窗伸縮至小於解析度 1000px 時，帶有 min-width: 1000px; 的容器仍維持它的最小寬度，而瀏覽器則產生捲軸 Scrollbar。
▍@media (max-width: 992px){...}
● 螢幕解析度 ≤ 992px
@media (max-width: 992px){...} 表示當螢幕解析度 ≤ 992px 的時候 （螢幕解析度小於 992px、等於 992px 的時候） ，載入這一段語法 → .container{ color: red;} ，而原本的 .container{ color: #000;} 就被覆蓋掉了，文字顏色則從黑色變成紅色。
● 螢幕解析度 ≤ 768px
@media (max-width: 768px){...} 表示當螢幕解析度 ≤ 768px 的時候 （螢幕解析度小於 768px、等於 768px 的時候） ，載入這一段語法 → .container{ color: green;} ，而原本的 .container{ color: red;} 就被覆蓋掉了，文字顏色則從紅色變成綠色。
▍@media (min-width: 992px){...}
● 螢幕解析度 ≥ 992px
@media (min-width: 992px){...} 表示當螢幕解析度 ≥ 992px 的時候 （螢幕解析度大於 992px、等於 992px 的時候） ，載入這一段語法 → .container{ color: blue;} ，而原本的 .container{ color: #000;} 就被覆蓋掉了，文字顏色則從黑色變成藍色，而當螢幕解析度小於 992px 的時候，文字顏色才變回黑色。
小結
我經常會把 max-width、min-width 記錯，現在要再三刻在腦海裡🔨🔨：
max-width 用來設定元素的最大寬度。min-width 用來設定元素的最小寬度。@media (max-width: 992px){...} 當螢幕解析度 ≤ 992px 的時候載入語法。@media (min-width: 992px){...} 當螢幕解析度 ≥ 992px 的時候載入語法。
本篇也是給自己的認識與釐清，如有錯誤請務必告訴我，感激不盡！
Practice make perfect， 我是正在自我習作中的 Draw，我們下篇見 🙇🏻
