以下內容，通過練習中提到的通過AI總結的。

<header></header>

盒模型

一、盒模型的基本概念

在 CSS 中，每個元素都被看作是一個“盒子”，這個盒子由以下幾個部分組成：

??內容區域（Content Box）??：元素的實際內容（如文字、圖片等）所在的區域。寬度和高度（width和 height）默認指的是這個區域的尺寸。 ??
內邊距（Padding）?：內容區域與邊框之間的空白區域。通過 padding屬性設置。
??邊框（Border）??：圍繞在內邊距外部的線條。通過 border 屬性設置。
外邊距（Margin)??：邊框外部的空白區域，用于與其他元素分隔開。通過 margin屬性設置。

??注意??：box-sizing 只影響 ??內容區域、內邊距和邊框??的計算方式，不會影響外邊距（margin）。

作用：
box-sizing是一個用于控制元素??盒模型（Box Model）??計算方式的屬性。
它決定了元素的寬度（width）和高度（height）如何計算，即是否將??內邊距（padding）??、??邊框（border）??和??外邊距（margin）??包含在內。是否僅計算內容區域（content-box）的尺寸。

二、兩種盒模型的對比 舉例

1. box-sizing: content-box;（默認值）
??寬度和高度的計算方式??：width和 height僅表示??內容區域??的尺寸。??內邊距（padding）??和??邊框（border）??會額外增加到元素的寬度和高度之外。

??公式??：
實際寬度 = width + padding-left + padding-right + border-left + border-right
實際高度 = height + padding-top + padding-bottom + border-top + border-bottom

??特點??：
這是 CSS 的默認盒模型。寬度和高度的計算方式比較“直觀”，但可能會導致布局計算復雜，尤其是在需要精確控制元素大小時。

??示例??：

<div class="box content-box-example">內容</div>
.content-box-example {box-sizing: content-box; /* 默認值，可以省略 */width: 200px;height: 100px;padding: 10px;border: 5px solid black;
}

??實際效果??：
內容區域的寬度是 200px，高度是 100px。
加上 padding（左右各 10px，共 20px）和 border（左右各 5px，共 10px）后：
實際寬度 = 200 + 20 + 10 = 230px
實際高度 = 100 + 20 + 10 = 130px

2. box-sizing: border-box;
   ??寬度和高度的計算方式??： width和 height表示??整個盒子??的尺寸（包括內容區域、內邊距和邊框）。
   ??內邊距（padding）??和??邊框（border）??會包含在元素的寬度和高度之內，不會額外增加。

??公式??：
實際寬度 = width（已包含 padding 和 border）
實際高度 = height（已包含 padding 和 border）

??特點??：
更加直觀和易于控制，尤其是在需要精確布局時。
開發者可以直接設置 width和 height，而不需要額外計算 padding和 border的影響。

??示例??：

<div class="box border-box-example">內容</div>
.border-box-example {box-sizing: border-box;width: 200px;height: 100px;padding: 10px;border: 5px solid black;
}

??實際效果??：
width和 height已經包含了 padding和 border。
實際寬度 = 200px（包括內容、內邊距和邊框）。
實際高度 = 100px（包括內容、內邊距和邊框）。

內容區域的實際寬度 = 200 - 20（padding） - 10（border） = 170px
內容區域的實際高度 = 100 - 20（padding） - 10（border） = 70px

三、總結

特性	描述
作用	控制元素的寬度和高度如何計算，即是否將內邊距和邊框包含在內。
??取值??	content-box（默認值）：寬度和高度僅表示內容區域的尺寸； border-box：寬度和高度表示整個盒子的尺寸（包括內容、內邊距和邊框）。
??默認值??	content-box
??常見用途?	精確控制元素尺寸、簡化布局計算、響應式設計、表單元素樣式調整等。
??全局設置??	通常會在全局范圍內設置 box-sizing: border-box;，以便統一盒模型的計算方式。

??注意??：box-sizing不會影響外邊距（margin）的計算方式，外邊距始終是在盒子的外部。

html, body {box-sizing: border-box;margin: 0;padding: 0;
}*, *::before, *::after {box-sizing: inherit; /* 繼承父元素的 box-sizing */
}

Flexbox 彈性盒子布局

Flexbox（Flexible Box Layout，彈性盒子布局）是 CSS3 引入的一種??一維布局模型??，用于更高效地分配和對齊容器中的子元素，特別適合處理??動態內容??和??響應式布局??。它能夠輕松實現??水平居中、垂直居中、等高等寬、自動伸縮??等傳統布局難以完成的效果。

一、Flexbox 的核心概念??

Flexbox 布局由兩個主要部分組成：

• ??Flex 容器（Flex Container）??
  通過 display: flex 或 display: inline-flex定義的元素，成為 Flex 容器。
  它的直接子元素會自動成為 **??Flex 項目（Flex Items）**??。

• ??Flex 項目（Flex Items）??
  Flex 容器的子元素（默認是塊級或行內元素，但會被 Flex 容器影響布局）。

二、Flexbox 的基本語法??

??1. 定義 Flex 容器?

• display: flex：容器變為塊級元素，占據整行。
• display: inline-flex：容器變為行內元素，寬度由內容決定。

??2. Flex 容器的主要屬性??

Flex 容器控制子元素的排列方式，主要屬性包括 5個：
flex-direction（主軸方向）??;justify-content（主軸對齊方式）??;align-items（交叉軸對齊方式）??;flex-wrap（是否換行）??;align-content（多行對齊方式）??

??(1) flex-direction（主軸方向）??
定義 Flex 項目在容器中的排列方向：

.container {flex-direction: row; /* 默認值，水平從左到右 */flex-direction: row-reverse; /* 水平從右到左 */flex-direction: column; /* 垂直從上到下 */flex-direction: column-reverse; /* 垂直從下到上 */
}

• ??row??（默認）：水平排列，從左到右。
• ??column??：垂直排列，從上到下。

??(2) justify-content（主軸對齊方式）??
定義 Flex 項目在??主軸??（默認水平方向）上的對齊方式：

.container {justify-content: flex-start; /* 默認值，左對齊 */justify-content: flex-end; /* 右對齊 */justify-content: center; /* 居中對齊 */justify-content: space-between; /* 兩端對齊，項目之間等距 */justify-content: space-around; /* 項目兩側等距 */justify-content: space-evenly; /* 項目之間和兩側等距 */
}

• ??space-between??：兩端對齊，項目之間等距。
• ??space-around??：項目兩側等距（項目之間的間距是兩側的兩倍）。
• ??space-evenly??：項目之間和兩側完全等距。

??(3) align-items（交叉軸對齊方式）??
定義 Flex 項目在??交叉軸??（默認垂直方向）上的對齊方式：

.container {align-items: stretch; /* 默認值，拉伸填滿容器高度 */align-items: flex-start; /* 頂部對齊 */align-items: flex-end; /* 底部對齊 */align-items: center; /* 垂直居中對齊 */align-items: baseline; /* 基線對齊（文字底部對齊） */
}

??stretch??（默認）：項目拉伸填滿容器高度（如果項目沒有固定高度）。
??baseline??：項目的文字基線對齊（適用于文字排版）。

??(4) flex-wrap（是否換行）
flex-wrap 屬性決定當 flex 容器太小時項目的排列方式。
將它設置為 wrap 將允許項目換行到下一行/列。
nowrap（默認值）將阻止項目換行，此時項目可能會收縮以自適應或溢出。??
定義 Flex 項目是否換行：

.container {flex-wrap: nowrap; /* 默認值，不換行 */flex-wrap: wrap; /* 換行，項目從上到下排列 */flex-wrap: wrap-reverse; /* 換行，項目從下到上排列 */
}

??wrap??：如果項目超出容器寬度，會自動換行。

**??(5) align-content（多行對齊方式）**??
定義多行 Flex 項目在交叉軸上的對齊方式（僅當 flex-wrap: wrap時生效）：

.container {align-content: stretch; /* 默認值，拉伸填滿容器 */align-content: flex-start; /* 頂部對齊 */align-content: flex-end; /* 底部對齊 */align-content: center; /* 垂直居中對齊 */align-content: space-between; /* 兩端對齊 */align-content: space-around; /* 兩側等距 */
}

??3. Flex 項目的主要屬性??

Flex 項目可以單獨調整其在容器中的行為：

??(1) order（排列順序）??
定義 Flex 項目的排列順序（默認 0，數值越小越靠前）：

.item {order: 1; /* 調整順序 */
}

??(2) flex-grow（放大比例）??
定義 Flex 項目如何分配剩余空間：

.item {flex-grow: 1; /* 默認 0，不放大 */
}

如果所有項目 flex-grow: 1，則剩余空間均分。
如果某個項目 flex-grow: 2，則它占據 2 倍于其他項目的空間。

??(3) flex-shrink（縮小比例）??
定義 Flex 項目如何收縮以適應容器：

.item {flex-shrink: 1; /* 默認 1，允許縮小 */
}

如果所有項目 flex-shrink: 1，則空間不足時均分收縮。
如果某個項目 flex-shrink: 0，則它不會縮小。

??(4) flex-basis（初始大小）??
定義 Flex 項目的初始大小（類似 width，但優先級更高）：

.item {flex-basis: 200px; /* 初始寬度 200px */
}

可以是固定值（如 200px）或百分比（如 50%）。

??(5) flex（簡寫屬性）??
flex是 flex-grow、flex-shrink和 flex-basis的簡寫：

.item {flex: 1 1 200px; /* flex-grow: 1, flex-shrink: 1, flex-basis: 200px */
}

常用簡寫：
flex: 1→ flex: 1 1 0%（默認等分剩余空間）。
flex: auto→ flex: 1 1 auto（根據內容自動調整）。
flex: none→ flex: 0 0 auto（不伸縮，固定大小）。

??三、Flexbox 的常見布局示例??

??1. 水平居中??

.container {display: flex;justify-content: center; /* 水平居中 */
}

??2. 垂直居中??

.container {display: flex;align-items: center; /* 垂直居中 */
}

??3. 水平垂直居中??

.container {display: flex;justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */
}

??4. 等寬布局??

.container {display: flex;
}
.item {flex: 1; /* 所有項目等分剩余空間 */
}

??5. 導航欄布局??

.nav {display: flex;justify-content: space-between; /* 兩端對齊 */align-items: center; /* 垂直居中 */
}

??四、Flexbox vs Grid 布局??

特性	Flexbox	Grid
??布局方向??	一維（行或列）	二維（行和列）
??適用場景??	動態內容、導航欄、卡片布局	復雜網格布局（如儀表盤）
??對齊控制??	justify-content和 align-items	justify-items和 align-items
??項目順序??	order屬性	grid-column和 grid-row

• ??Flexbox 適合一維布局??（如導航欄、卡片列表）。 ??
• Grid 適合二維布局??（如儀表盤、復雜網格）。

?五、總結??

??Flexbox 是一種強大的 CSS 布局模型??，適用于動態內容和對齊需求高的場景。

??核心屬性??：

• 容器：flex-direction, justify-content, align-items, flex-wrap, align-content。
• 項目：order, flex-grow, flex-shrink, flex-basis, flex。

??常見用途??：

• 水平/垂直居中。 等寬布局。 導航欄、卡片列表。

img object-fit

特性	說明
作用??	控制圖片/視頻等替換元素在固定尺寸容器內的填充方式（是否拉伸、裁剪或留白）。
??核心取值??	- fill（默認）：拉伸填滿容器（可能變形）。 - contain：完整顯示內容（可能留白）。 - cover：填滿容器并裁剪多余部分（保持比例）。 - none：保持原始尺寸（可能溢出）。 - scale-down：選擇 none或 contain中更合適的（避免變形或溢出）。
??常見場景??	- 響應式圖片/視頻布局（如卡片、彈窗）。 - 固定比例顯示圖標/Logo。 - 視頻適配固定尺寸播放器。
??兼容性?	現代瀏覽器支持，IE 不支持（需用 background-image或 padding-top替代）。
??搭配屬性??	object-position：控制內容在容器內的對齊位置（如居中、左上角等）。

注意??：object-fit只影響元素內容的顯示方式，不會改變元素本身的尺寸（即 width和 height仍需顯式設置）。

• object-fit控制內容的縮放方式 object-position可以控制內容的??對齊方式??（類似于
  background-position）。

gap

gap CSS 縮寫屬性設置行和列之間的間隙，也被稱為網格間距（gutter）。 gap 屬性以及 row-gap 和 column-gap 子屬性用來設置 flex、grid 和多列布局的間隙。 可以將此屬性應用到容器元素。

??CSS ::after偽元素詳解??

??1. 基本概念??

::after是 CSS ??偽元素??之一，用于在??選定元素的內容之后??插入一個??虛擬的子元素??（實際是生成的內容）。它常用于添加裝飾性內容或實現特定布局效果。

??注意??：
::after生成的內容是??獨立的子元素??，但不會出現在 HTML 源碼中（純 CSS 實現）。
類似偽元素還有 ::before（在內容之前插入內容）。

??2. 基礎語法??

selector::after {content: "插入的內容"; /* 必須屬性 *//* 其他樣式屬性（如 display、color、position 等） */
}

??content??：必需屬性，定義插入的內容（可以是文本、空字符串或圖像）。
??默認顯示??：生成的元素是 inline行內元素（可通過 display修改）。

3. 關鍵注意事項??

• content屬性必填?? 即使不需要插入內容（如清除浮動），也必須設置 content: “”（空字符串）。
• ??生成的元素是行內元素?? 默認 display: inline，可通過 display: block或 flex等修改布局。
• ??無法直接選中或綁定事件?? ::after生成的內容無法通過 JavaScript 直接操作或綁定事件（它是純樣式層面的）。
• ??與 ::before的區別?? ::before在內容前插入，::after在內容后插入。