昨天的封面介紹了 Chrome 瀏覽器，今天的主角則是 Firefox 火狐（因為很喜歡狐狸就畫了！毛毛的！）。雖然現在市面上多數的瀏覽器都是以 Chromium 為核心，但 Firefox 依然擁有一群死忠的使用者。不過，在寫 CSS 的時候就要特別留意了，為了顧及 Firefox 的使用者，盡量避免使用太新的 CSS 語法，以免出現不支援的狀況。（但如果你覺得反正 Chromium 都支援了，沒差啦～那也可以自己衡量看看！）
回到今天的主題！！=͟͟͞͞( •̀д•́))
昨天介紹了如何改變元素的顯示方式，接下來，將會深入探討元素的「盒模型」結構，理解盒模型對掌握網頁版面配置相當重要，它決定元素如何佔據空間、與其他元素互動，以及影響整體視覺呈現效果。
網頁由許多 HTML 元素構成，這些元素層層疊加並相互包裹。每個元素如同一個「盒子」，從內而外包含四個部分：內容（Content）、內距（Padding）、邊框（Border）和外距（Margin）。這些盒子可能包含其他元素盒子，也可能被其他元素盒子所包含，因此稱為「盒模型」。
以下將從元素的內部至外部，逐一說明各部分的特性與用法。
內容區域是盒模型的核心部分，用來放置元素的實際內容，如文字或圖片等，這些都會在此區域中顯示。當我們將文字、圖片放入元素中，接下來通常會需要設定元素的尺寸。以下將介紹元素的尺寸調整方法。
可以透過 width 和 height 屬性來控制內容區域的尺寸，這些屬性可以使用不同的單位來設定，以適應不同的顯示環境。
.element {
width: 300px; /* 寬度為 300 像素 */
height: 200px; /* 高度為 200 像素 */
}
CSS 提供很多種設定尺寸的單位，每種單位適用於不同情境：
px（像素）：絕對單位，適合需要精確控制的情況。
%（百分比）：相對單位，相對於父元素的百分比，適合響應式設計。
例如：設定父元素 .container 寬度為 200px，設定 .box 寬度為 50%，則 .box 的實際寬度就是 100px（100px 的 50%）。
vw、vh（視窗寬度、視窗高度）：相對單位，相對於瀏覽器視窗寬度、視窗高度的百分比。
vw 表示視窗寬度的 1%，100vw 表示螢幕寬度。
vh 表示視窗高度的 1%，100vh 表示螢幕高度。
例如：如果瀏覽器視窗寬度為 800px、高度為 600px，那麼 .box 寬度為 50vw 的元素寬度就是 400px（800px 的 50%），設定 .box 高度為 80vh 的元素高度就是 480px（600px 的 80%）。
em：相對單位，相對於父元素字體大小。
例如：一個元素設定了字體大小為 20px，內元素將尺寸設定為 1.5em，則該尺寸為 30px（20px 的 1.5 倍）。
rem：相對單位，相對於根元素（<html>）字體大小。
例如：通常網頁根元素字體大小設定為 16px，則 1.5rem 相當於 24px（16px 的 1.5 倍）。
ch：相對單位，字符寬度，基於字元「0」的寬度。
例如：如果字元「0」 的寬度是 10px，那麼 20ch 就是 200px 寬。這個單位在設定文字區域的寬度時特別有用，可以設定一行文字的理想長度，提高閱讀體驗。通常 45～75 個字元的行寬被認為是最適合閱讀的寬度。
除了使用上述的數值單位設定尺寸外，CSS 還提供一些特殊的關鍵字來控制尺寸：
/* 根據內容自動調整寬度 */
width: auto;
/* 剛好符合內容的寬度 */
width: fit-content;
/* 回復到瀏覽器的初始值 */
width: unset;
可以使用 max-width、max-height、min-width、min-height 屬性來設定尺寸的上下限，限制元素的最大和最小尺寸，特別適用於使用相對單位設定尺寸的元素，能防止元素變得過大或過小，在響應式設計中特別實用。
.box {
/* 寬度為父元素寬度 100% */
width: 100%;
/* 最大不超過 800px */
max-width: 800px;
/* 最小不小於 300px */
min-width: 300px;
}
為了避免每次都需撰寫三行來設定最大和最小值，可以使用 clamp() 函數來簡化這個過程。
width: clamp( 最小寬度, 首選寬度, 最大寬度 ); /* 設定數值最小與最大值 */
width: clamp(300px, 80%, 800px); /* 最小 300px，首選 80%，最大 800px */
aspect-ratio 屬性可用於維持元素的寬高比例。即使元素的寬度或高度變化，另一個維度也會自動調整。例如：固定元素的寬度設 100% 滿版時，高度會根據設定的比例自動計算。
特別適合用於響應式設計中的圖片容器、影片嵌入和卡片元素，確保它們在不同螢幕尺寸下都能維持正確的視覺比例。
.image-container {
width: 100%;
aspect-ratio: 16 / 9; /* 16:9 比例 */
}
.square {
aspect-ratio: 1 / 1; /* 正方形 */
}
為確保網頁在各種螢幕尺寸下都能正常顯示，應優先使用相對單位（如 %、vw、vh、em、rem 等）。這些單位能讓元素尺寸根據瀏覽器視窗或父容器自動調整，大幅提升響應式設計的彈性。
適當利用最大和最小尺寸限制，可確保元素在各種螢幕尺寸下都能維持良好的可讀性和視覺美感。例如：網頁設計通常會將內容置中，並設定最大寬度，避免文字行寬過長影響閱讀體驗。
.container {
/* 設定主要內容容器 */
width: 90%; /* 使用視窗寬度的90% */
max-width: 1200px; /* 最大寬度限制 */
margin: 0 auto; /* 左右置中 */
}
設定文章的最大寬度時，可以利用 ch 單位作為寬度單位，特別適合控制閱讀文字的行寬。例如：設定文章容器的寬度為 45～75 個字元，創造最佳的閱讀體驗。
article {
width: 100%;
min-width: 45ch;
max-width: 75ch;
}
使用 padding 屬性可以調整元素的內部間距，它是內容區域與邊框之間的空白區域，屬於「元素內部空間」，會顯示背景色，且在此區域點擊滑鼠仍視為點擊此元素。
透過 padding 屬性在元素內部預留適當的空白區域，可增加視覺呼吸空間，避免內容緊貼邊框而影響閱讀體驗。
間距可以針對四個邊分別設定
.element {
/* 四邊內距都是 20px */
padding: 20px;
/* 上下內距 10px，左右內距 20px */
padding: 10px 20px;
/* 上右下左內距，順序為順時針 */
padding: 5px 10px 15px 20px;
}
上下左右也可以分別設定
.element {
padding-top: 5px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 20px;
}
在按鈕、卡片等互動元件中，通過設定適當的內部間距，可以增加點擊或觸碰的目標區域，提升用戶體驗。例如，設定 padding: 12px 20px 可讓按鈕有更大的可點擊範圍。
有時候元件本身不必設定固定尺寸，而應該讓內容決定基本大小，再透過內部間距向四周撐開空間，這種做法更為彈性。
/* 讓按鈕根據內容自動調整尺寸 */
.button {
/* 而不是直接設定寬高 */
padding: 12px 20px;
display: inline-block;
}
/* 卡片元素依賴內部間距創造空間感 */
.card {
padding: 24px;
background-color: #fff;
border-radius: 8px;
}
今天我們深入探討了盒模型最內層的核心結構：
%、rem、ch、vw/vh）、尺寸限制（min- / max- / clamp()）與 aspect-ratio，能打造出兼顧彈性與可讀性的響應式版面。搞懂了「內容」與「內距」如何由內而外撐起元素後，明天我們將繼續往外探索盒模型的另外兩大支柱，「邊框（Border）」 與掌控元素間距的 「外部間距（Margin）」，敬請期待囉！_ (°ω°｣ ∠) _
iThome鐵人賽
看影片追技術