二、網頁的“化妝師”：從零學習 CSS

一、CSS 是什么

1.1 CSS 的定義

CSS（Cascading Style Sheets，層疊樣式表） 是一種用來給 HTML 頁面 添加樣式的語言。
簡單來說：

HTML 負責結構 —— 決定網頁上有什么內容。
CSS 負責樣式 —— 決定這些內容“長什么樣”。

如果把網頁比作房子：

HTML 就是房子的框架和結構
CSS 就是房子的裝修和設計

例如，你可以通過 HTML 定義一個標題 <h1>，而通過 CSS 讓它變得更好看，比如改變顏色、字體、大小等。

示例：

HTML 文件（沒有 CSS 的樣子）：

<h1>歡迎來到我的網頁</h1>
<p>這里是一個簡單的介紹頁面。</p>

默認瀏覽器效果：黑色文字、白色背景，非常樸素。

加入 CSS 后：

<style>
h1 {color: blue;font-size: 32px;text-align: center;
}
p {color: #555;font-size: 16px;
}
</style>

效果變化：

標題變成藍色、居中、字體更大
段落文字變成灰色，更易閱讀

這就是 CSS 的作用：讓網頁更美觀、更具可讀性。

二、基本語法規范

CSS 代碼由 選擇器（Selector） 和 聲明塊（Declaration Block） 組成。
選擇器+{一條/N 條聲明}

選擇器決定針對誰修改（找誰）
聲明決定改啥（干啥）
聲明的屬性是鍵值對，使用 ; 區分鍵值對，使用 : 區分鍵和值

2.1 基本結構

選擇器 {屬性名: 屬性值;屬性名: 屬性值;
}

示例：

p {color: red;font-size: 20px;
}

解釋：

p 是 選擇器，表示對所有 <p> 段落標簽應用樣式
{ } 內的內容是 聲明塊
color: red; 是一條聲明，由屬性名和屬性值組成

2.2 注意事項

每條聲明都以分號 ; 結束
屬性名和屬性值之間用冒號 : 連接
花括號 { } 必須成對出現
盡量使用小寫字母書寫屬性名（規范習慣）

錯誤示例：

p {Color = Red  /* ? 錯誤：大小寫不規范、使用了 = */
}

注意：

CSS 要寫到 style 標簽中（后面還會介紹其他寫法）
style 標簽可以放到頁面任意位置，一般放到 head 標簽內
CSS 使用 /**/ 作為注釋。（使用 Ctrl+/ 快速注釋和取消注釋）

三、引入方式

CSS 有 三種常見引入方式，根據使用場景選擇。

3.1 行內樣式（Inline Style）

直接在 HTML 標簽上使用 style 屬性寫 CSS 樣式。只適合于寫簡單樣式, 只針對某個標簽生效。

示例：

<p style="color: blue; font-size: 18px;">這是行內樣式的段落</p>

特點：

優點：快速、簡單，適合小范圍測試或臨時修改
缺點：不易維護，結構與樣式混在一起，代碼冗余，不能寫太復雜的樣式，這種寫法優先級較高會覆蓋其他樣式，所以不推薦這樣寫。

3.2 內部樣式表（Internal Style Sheet）

在 HTML 文件的 <head> 標簽中使用 <style> 編寫 CSS。
理論上來說 style 放到 htmnl 的哪里都行，但是一般都是放到 head 標簽中。

示例：

<head><style>h1 {color: green;text-align: center;}p {color: gray;}</style>
</head>

特點：

優點：HTML 和 CSS 分開，結構更清晰
缺點：樣式只作用于當前 HTML 文件，分離的還不徹底，尤其是 CSS 內容多的時候，平常練習可以使用，項目中不建議用

3.3 外部樣式表（External Style Sheet）

將 CSS 單獨寫在一個 .css 文件中，然后通過 <link> 標簽引入。
目前實際開發中最常用的一種方式，推薦使用。

創建一個 CSS 文件
使用 link 標簽引入 CSS

目錄結構：

project/
│
├── index.html
└── style.css

style.css 文件：

h1 {color: purple;
}
p {font-size: 18px;color: #333;
}

index.html 文件：

<head><link rel="stylesheet" href="style.css">
</head>

注意：一定要在 html 文件中用 link 調用 CSS 否則不生效
特點：

優點：結構和樣式徹底分離，便于維護和復用
缺點：首次加載時需要額外請求 CSS 文件，受到瀏覽器的緩存影響，修改之后不一定立刻生效

關于緩存：
這是計算機中一種常見的提升性能的技術手段。
網頁依賴的資源（圖片/CSS/JS 等）通常是從服務器上獲取的，如果頻繁訪問該網站，那么這些外部資源就沒必要反復從服務器獲取，就可以使用緩存先存起來（就是存在本地磁盤上了）。從而提高訪問效率。
可以通過 Ctrl+F5 強制刷新頁面，強制瀏覽器重新獲取 CSS 文件。

四、選擇器

選擇器（Selector）用來選中 HTML 元素，從而對它們應用樣式。
選擇器種類很多，下面介紹常見的幾種。

選擇器的功能

選中頁面中指定的元素，要先選中元素，才能設置元素的屬性
就好比 SC 2，War 3 這樣的游戲，需要先選中單位，再指揮該單位行動

基礎選擇器：單個選擇器構成

通配符選擇器
元素選擇器
類選擇器
ID 選擇器

復合選擇器：把多種基礎選擇器綜合運用起來

后代選擇器
子選擇器
并集選擇器
偽類選擇器

4.1 通配符選擇器（`*`）

使用 * 的定義選中頁面上的所有元素。

示例：

* {margin: 0;padding: 0;
}

作用： 常用于頁面初始化，清除瀏覽器默認的邊距。

4.2 元素選擇器

直接使用標簽名，選中所有該標簽的元素。

特點：

能快速為同一類型的標簽都選擇出來
但是不能差異化選擇

示例：

p {color: blue;
}

解釋： 所有 <p> 段落文字都變為藍色。

4.3 類選擇器（`.class`）

使用 . 定義類，然后通過 class 屬性應用。

特點：

差異化表示不同的標簽
可以讓多個標簽的都使用同一個類

示例：

.red-text {color: red;font-weight: bold;
}

HTML 中使用：

<p class="red-text">這是紅色文字</p>

語法細節：

類名用 . 開頭的
下方標簽使用 class 屬性來調用
一個類可以被多個標簽使用，一個標簽也能使用多個類（多個類名要使用空格分割，這種做法可以讓代碼更好復用）
如果是長的類名，可以使用 - 分割
不要使用純數字，或者中文，以及標簽名來命名類名
一個標簽可以同時使用多個類名，中間要用空格隔開，這樣可以把相同的屬性提取出來，達到簡化代碼的效果

4.4 ID 選擇器（`#id`）

使用 # 定義 ID，然后通過 id 屬性應用。

示例：

#main-title {font-size: 30px;color: green;
}

HTML 中使用：

<h1 id="main-title">主標題</h1>

注意：

ID 在同一個頁面中唯一，不能重復使用。
CSS 中使用 # 開頭表示 id 選擇器
Id 選擇器的值和 html 中某個元素的 id 值相同
Html 的元素 id 不必帶 #
Id 是唯一的，不能被多個標簽使用（是和類選擇器最大的區別）

我們可以類比一下，類選擇器就像是我們的姓名一樣可以重復，而 id 則像我們的身份證號碼是唯一的

4.5 后代選擇器

選中某個元素內的子元素或后代元素（又叫做包含選擇器）。

示例：

div p {color: orange;
}

HTML 結構：

<div><p>我是 div 中的段落</p>
</div>
<p>我是外面的段落</p>

效果：

只有 div 內部的 <p> 文字變成橙色，外部的 <p> 不受影響。

不同的元素之間要使用空格分離
div 是父級元素，div 里面的 p 是子級元素

4.6 子選擇器

和后代選擇器類似，但是只能選擇子標簽，不能選子標簽的子標簽，而后代選擇器可以選

div>a {color: red;
}

<div><a href="#">a標簽</a><p><a href="#">a標簽2</a></p>
</div>

像上面的案例只會選擇到第一個 a 標簽，p 里面包著的那個不會被選擇，而后代選擇器會選擇到

4.7 并集選擇器

并集選擇器主要用來進行集體聲明

通過逗號分割多個元素
表示同時選中元素 1 和元素 2
任何基礎選擇器都可以使用并集選擇器
并集選擇器建議豎著寫，每個選擇器占一行（最后一個選擇器不能加逗號）

div, h3 {color: red;}

<div>蘋果</div><h3>香蕉</h3><ul>
<li>鴨梨</li>
<li>橙子</li>
</ul>

4.8 偽類選擇器

(1) 鏈接偽類選擇

a:link 選擇未被訪問過的鏈接
a:visited 選擇已經被訪問過的鏈接
a:hover 選擇鼠標指針懸停上的鏈接
a:active 選擇活動鏈接（鼠標按下了但是未彈起）

如何讓一個已經被訪問過的鏈接恢復成未訪問的狀態？
清空瀏覽器歷史記錄就好了，快捷鍵：Ctrl + shift + delete

注意

按照 LVHA 的順序書寫，例如把 active 拿到前面去，就會導致 active 失效
瀏覽器的 a 標簽都有默認樣式，一般實際開發都需要單獨制定樣式
實際開發

<a href="#">小貓</a>

a:link {color: black;/* 去掉 a 標簽的下劃線 */text-decoration: none;}a:visited {color: green;}a:hover {color: red;}a:active {color: blue;}

:hover 是完成滑動門的重要部分需要重要掌握

(2) : focuce 偽類選擇器
選取獲取焦點的 input 表單元素

<div class="three"><input type="text"><input type="text"><input type="text"><input type="text">
</div>

.three>input:focus {color: red;
}

此時被選中的表單的字體就會變成紅色

<style>.font-family .one{font-family:'Microsoft YaHei';}
</style>

五、常用的元素屬性

CSS 中屬性有很多，可以參考文檔
CSS參考文檔

千萬不要死記硬背，用什么學什么，用多了就記住了，多寫代碼

CSS 提供了豐富的屬性來控制網頁元素的外觀，這些屬性是網頁設計的核心基礎。

在實際開發中，最常用的元素屬性主要包括：

字體屬性 —— 控制文字的字體、大小、粗細、樣式
文本屬性 —— 控制文字顏色、對齊方式、裝飾、縮進、行高
背景屬性 —— 控制背景顏色、背景圖片、平鋪、位置、尺寸
圓角矩形屬性 —— 控制元素邊角的圓潤效果

接下來，我們將逐一詳細講解。

5.1 字體屬性（Font Properties）

字體屬性主要用于控制網頁中文字的視覺效果，讓文字具有更好的可讀性和美觀度。

1）設置字體：`font-family`

font-family 用于設置文本的字體。

語法：

font-family: 字體1, 字體2, 字體3, 通用字體族;

關鍵點：

瀏覽器會從左到右依次尋找字體，找到后立即使用，不再繼續查找。
最后一個字體通常使用通用字體族，例如 serif（襯線字體）、sans-serif（無襯線字體）、monospace（等寬字體）。
如果字體名稱包含空格，必須用引號包裹，如 "Microsoft YaHei"。

示例：

p {font-family: "Microsoft YaHei", "SimSun", Arial, sans-serif;
}

解釋：

優先使用微軟雅黑
沒有微軟雅黑則使用宋體
沒有宋體則使用 Arial
最后使用系統默認的無襯線字體

字體名稱可以用中文，但是不建議
多個字體之間使用逗號分隔（從左到右查找字體，如果都找不到，會使用默認字體。）
如果字體名有空格，使用引號包裹
建議使用常見字體，否則兼容性不好

常見的字體族分類：

通用字體族	示例字體	特點
serif	宋體、Times New Roman	字體末端有裝飾線，適合正文
sans-serif	微軟雅黑、Arial	無襯線，現代簡潔風格
monospace	Courier New	等寬字體，適合代碼展示
cursive	Comic Sans MS	手寫體風格
fantasy	Papyrus	裝飾字體

2）字體大小：`font-size`

font-size 用于設置文字的大小。

常用單位：

單位	說明	示例
px	像素，絕對大小，最常用	16px
em	相對父元素字體大小的倍數	1.5em
rem	相對 HTML 根元素字體大小的倍數	1rem
%	相對父元素字體大小的百分比	120%

不同的瀏覽器默認字號不一樣，最好給一個明確值（chrome 默認是 16 px）
可以給 body 標簽使用 font-size
要注意單位 px 不要忘記
標題標簽需要單獨指定大小

注意：實際上它設置的是字體中字符框的高度；實際的字符字形可能比這些框高或矮

示例：

h1 {font-size: 32px; /* 標題文字較大 */
}
p {font-size: 16px; /* 段落文字常用大小 */
}

em 和 rem 的區別：

假設 html 標簽的字體大小是 16px：

單位	計算方式	實際大小
1em	相對父元素字體大小	父元素 16px → 1em = 16px
1rem	相對 html 根字體大小	根 16px → 1rem = 16px

html {font-size: 16px;
}div {font-size: 20px;
}div p {font-size: 1em;  /* 20px */
}div span {font-size: 1rem; /* 16px */
}

開發建議：

標題類文字通常使用 px

響應式布局和移動端建議使用 rem 或 em

3）字體粗細：`font-weight`

控制文字的粗細，常用來強調重點或優化排版。

常用值：

值	說明	對應數值
normal	默認正常字體	400
bold	加粗	700
lighter	比父元素更細	相對值
bolder	比父元素更粗	相對值
100-900	數值方式，100 最細，900 最粗	-

可以使用數字表示粗細
700==bold，400 是正常粗細 400==normal
取值范圍是 100~900

示例：

h1 {font-weight: bold; /* 加粗 */
}p {font-weight: 400; /* 普通粗細 */
}

擴展技巧：

.very-bold {font-weight: 900;
}

適合標題或需要強烈視覺強調的文字。

4）文字樣式：`font-style`

控制文字是否為斜體，常用于強調或表示外文詞匯。

常用值：

值	說明
normal	正常（默認）
italic	斜體
oblique	傾斜（不常用）

示例：

em {font-style: italic;
}

效果：

<em> 標簽內容顯示為斜體。

5.2 文本屬性（Text Properties）

文本屬性用于控制文字的顏色、對齊方式、裝飾等細節，是排版設計的核心。

1）文本顏色：`color`

設置文字的顏色。

顏色表示方法：

表示方式	示例	說明
顏色名稱	red, blue	簡單易記，但選擇少
十六進制	#ff0000, #333	常用，#333 表示 #333333
RGB	rgb(255, 0, 0)	紅、綠、藍三色組合
RGBA	rgba(255, 0, 0, 0.5)	透明度控制，0-1 之間

示例：

p {color: #333333;
}.title {color: rgba(255, 0, 0, 0.8); /* 半透明紅色 */
}

拓展知識：
rgb 和 rgba 都是 CSS 中常用的顏色表示方式。

rgb 代表 紅色（Red）、綠色（Green） 和 藍色（Blue） 三種光的強度值，通過這三種顏色的不同組合，幾乎可以表示出所有顏色。每個顏色通道的取值范圍是 0 ~ 255，0 代表該顏色通道完全沒有，255 代表顏色最強。例如：rgb(255, 0, 0) 表示純紅色，因為紅色通道值為 255，而綠色和藍色為 0。
rgba 是在 rgb 的基礎上增加了 Alpha 通道，用于表示顏色的透明度。Alpha 的取值范圍是 0 ~ 1，其中 0 表示完全透明，1 表示完全不透明，中間值表示半透明效果。例如：rgba(255, 0, 0, 0.5) 表示一個 50% 透明度的紅色，適合制作具有層次感或疊加效果的網頁元素。

請添加圖片描述

口紅色號不同本質上就是 RGB 值不同，好奇的就可以去看看在線調色板

2）文本對齊：`text-align`

控制文本在父容器中的水平對齊方式。
不光能控制文本對齊，也能控制圖片等元素居中或者靠右

常用值：

值	說明
left	左對齊（默認）
center	居中對齊
right	右對齊
justify	兩端對齊

示例：

h1 {text-align: center;
}p {text-align: justify;
}

3）文本裝飾：`text-decoration`

為文字添加或去除裝飾，如下劃線、刪除線、上劃線。

常用值：

值	說明
none	無裝飾
underline	下劃線
line-through	刪除線
overline	上劃線

underline 下劃線
none 啥都沒有可以給 a 標簽去掉下劃線
overline 上劃線
line-through 刪除線

示例：

a {text-decoration: none; /* 去掉默認下劃線 */
}

4）文本縮進：`text-indent`

控制段落首行縮進，常用于中文排版。

單位可以使用 px 或者 em
使用 em 作為單位更好，1 個 em 就是當前元素的文字大小
縮進可以是負的，表示往左縮進

示例：

p {text-indent: 2em;
}

解釋：

1em = 一個字體大小
2em = 兩個字符寬度

中文段落常用 2em 首行縮進，讓段落結構更加清晰。

5）行高：`line-height`

控制文字行與行之間的垂直間距，便于閱讀。

理論上行高指的是上下文本行之間的基線距離
HTML 中展示文字涉及到這幾個基準線：
頂線
中線
基線（相當于英語四線格的倒數第二條線）
底線
內容區：底線和頂線包裹的區域

三種寫法：

寫法	示例	說明
數值	line-height: 1.8;	相對于字體大小的倍數
像素(px)	line-height: 30px;	固定值，絕對間距
百分比(%)	line-height: 180%;	相對字體大小的百分比

示例：

p {font-size: 16px;line-height: 1.8;
}

開發建議：
一般正文的行高為 1.5~1.8 倍字體大小，便于閱讀。

5.3 背景屬性（Background Properties）

背景屬性用于控制網頁元素的背景樣式，是網頁美化的重要手段。

1）背景顏色：`background-color`

為元素添加純色背景。

示例：

div {background-color: lightblue;
}

常見應用：

按鈕背景色
區塊分隔

2）背景圖片：`background-image`

為元素添加背景圖片。

語法：

background-image: url("圖片路徑");

示例：

div {background-image: url("images/bg.jpg");
}

比 image 更方便控制位置 (圖片在盒子中的位置)

注意:

url 不要遺漏
url 可以是絕對路徑, 也可以是相對路徑
url 上可以加引號, 也可以不加

3）背景平鋪：`background-repeat`

控制背景圖片是否平鋪。

值	說明
repeat	默認，水平垂直都平鋪
no-repeat	不平鋪
repeat-x	僅水平平鋪
repeat-y	僅垂直平鋪
背景顏色和背景圖片可以同時存在, 背景圖片在背景顏色的上放

示例：

div {background-image: url("bg.jpg");background-repeat: no-repeat;
}

4）背景位置：`background-position`

控制背景圖片在元素中的位置。

參數有三種風格:

方位名詞: (top, left, right, bottom)
精確單位: 坐標或者百分比 (以左上角為原點)
混合單位: 同時包含方位名詞和精確單位

值示例	說明
left top	左上角
center center	居中
right bottom	右下角
50% 50%	精確定位

示例：

div {background-position: center center;
}

注意:

如果參數的兩個值都是方位名詞, 則前后順序無關, (top left 和 left top 等效)
如果只指定了一個方位名詞, 則第二個默認居中 (left 則意味著水平居中, top 意味著垂直居中)
如果參數是精確值, 則第一個肯定是 x, 第二個肯定是 y (x, y)
如果參數是精確值, 且只給了一個數值, 則該數值一定是 x 坐標, 另一個默認垂直居中
如果參數是混合單位, 則第一個值一定為 x, 第二個值為 y 坐標

注意:計算機上的平面坐標系與我們數學上的右手系不一樣, 是左手系 x 軸向右為正, y 向下為正, xy 的交點為原點

5）背景尺寸：`background-size`

控制背景圖片的縮放方式。

值	說明
auto	默認大小，不縮放
cover	等比例放大，填滿容器
contain	等比例縮放，完整顯示
100px 200px	自定義寬高

可以填具體的數值: 如 40 px 60 px 表示寬度為 40 px, 高度為 60 px
也可以填百分比: 按照父元素的尺寸設置
cover: 把背景圖像擴展到足夠大, 以至于可以覆蓋整個區域, 但是背景圖像部分區域可能看不到了
contain: 把背景圖像擴展到剛好可以放下的地步, 以使其寬度和高度完全適應內容區域

示例：

div {background-size: cover;
}

5.4 圓角矩形：`border-radius`

border-radius 用于設置元素邊角的圓角效果，使盒子更加圓潤。

語法：

border-radius: 數值;

數值是內切圓的半徑, 數值越大, 弧線越大

示例 1：四角同時設置圓角

div {width: 150px;height: 150px;background-color: orange;border-radius: 20px;
}

效果：四個角同時呈圓角。

示例 2：設置成圓形

如果元素寬高相等，將 border-radius 設置為 50%，可以得到一個圓形。

div {width: 100px;height: 100px;background-color: red;border-radius: 50%;
}

示例 3：每個角單獨設置

按順時針方向分別設置 左上 → 右上 → 右下 → 左下。

div {border-radius: 10px 20px 30px 40px;
}

記憶技巧：
從左上角開始，順時針依次設置。

六、元素的顯示模式（Display / 顯示類型）

概念總覽

display 屬性決定瀏覽器如何把一個元素“作為盒子”放在頁面里——是當作塊級(box) 來排（上下堆疊）還是當作內聯(inline) 來排（跟文字在一行）。此外 display 還能把元素設為 flex、grid 等布局容器，進而改變其子元素的布局模型。(MDN Web Docs)

6.1 塊級元素（Block-level elements）

行為要點（一句話）：塊級元素獨占一行、默認寬度撐滿父容器（水平占滿可用空間），可以設置 width/height/margin/padding，并產生上下外邊距。常見標簽：<div>, <p>, <h1>-<h6>, <ul>, <li>。

示例：

<div class="box">我是塊級元素</div>
<style>
.box{background:#f0f0f0;margin:10px 0;padding:10px;
}
</style>

特點

獨占一行
高度、寬度、內外邊距、行高都可以控制
寬度默認是父級元素寬度的 100%（和父元素一樣寬）
是一個容器（盒子），里面可以放行內和塊級元素
文字類的元素內不能使用塊級元素
p 標簽主要用于存放文字，內部不能放塊級元素尤其是 div

6.2 行內元素（Inline / 內聯元素）

行為要點：內聯元素不會換行，僅占據內容本身所需寬度，width/height 對大多數內聯元素無效（替代元素如 img、input 等是“已替換元素”有例外）。常見標簽：<span>, <a>, <strong>, <em>, <img>。

示例：

<span style="background: #ffefc4;">內聯文本</span>

特點：

不獨占一行，一行可以顯示多個
設置高度、寬度、行高無效
左右外邊距有效（上下無效），內邊距有效
默認寬度就是本身的內容
行內元素只能容納文本和其他行內元素，不能放塊級元素
a 標簽中不能再放 a 標簽（雖然 chrome 不報錯但是最好不要那么做）
a 標簽可以放塊級元素，但是更建議先把 a 標簽用 display：block 轉換為塊級元素

6.3 行內元素和塊級元素的區別（歸納比較）

換行：塊級元素前后會換行，內聯元素不換行。
寬高：塊級元素可設置 width/height；內聯元素通常忽略這些屬性（display:inline-block 可例外）。
外邊距行為：塊級元素的垂直外邊距會影響文檔流（會發生“外邊距折疊”），內聯元素主要受行高影響。
用途：塊級常用作布局容器，內聯常用于文本標記與小范圍樣式。

6.4 改變顯示模式（`display` 常用值與實戰）

常見值與用途（示例）：

display: block; —— 把元素當塊級對待。

a { display: block; } /* 鏈接變成塊級（可設置寬高） */

display: inline; —— 強制內聯。
display: inline-block; —— 內聯流中但可設置寬高（很常用）。
```
.btn { display:inline-block; padding:6px 12px; }
```
display: none; —— 元素完全從渲染樹移除（不可見，也不占空間）。注意：無障礙/可訪問性影響（屏幕閱讀器也可能忽略）。
display: flex; / display: inline-flex; —— 設為彈性容器（詳見第八章）。
display: grid; —— 二維網格布局容器（Grid，適合復雜布局）。
display: contents; —— 元素自身“消失”，其子元素仿佛提升到父層級（慎用，兼容性/語義問題）。

實戰小貼士：

想讓 span 能設置寬高，用 inline-block；
隱藏元素通常用 display:none，但若需保留在語義/可訪問性中可考慮 visibility:hidden（仍占位）或 aria-hidden。

七、盒模型（Box Model）

每個可見元素在瀏覽器里都是一個矩形盒子，盒子的四個層級（從內到外）是：content（內容） → padding（內邊距） → border（邊框） → margin（外邊距）。理解盒模型對于布局計算、響應式非常重要。

7.1 邊框（Border）

border 定義邊框寬度、樣式、顏色（border-width|border-style|border-color 或簡寫 border）。
邊框位于 padding 之外，會增加元素的外部視覺尺寸（在 box-sizing: content-box 下不含在 width 中）。
示例：

.box{ border: 2px solid #333; padding:10px; }

（border 可單獨控制每條邊：border-top、border-right 等）

7.2 內邊距（Padding）

padding 是內容與邊框之間的空白（可單邊設置 padding-top/right/bottom/left）。
padding 會增加元素的“外觀占用空間”——在默認 box-sizing: content-box 下，padding 會被加到 width/height 之外。(MDN Web Docs)

7.3 外邊距（Margin）

margin 是元素邊框之外的間距，用于控制元素與其它元素之間的距離。
垂直外邊距折疊 (margin collapsing)：相鄰塊級元素的垂直外邊距有時會合并為較大者，而不是相加（典型源于塊級流）。這點是布局時容易踩坑的關鍵細節。(MDN Web Docs)

7.x 盒模型與 `box-sizing`（強烈建議）

默認盒模型 box-sizing: content-box：width 只指內容區寬度，padding + border 會額外增加總寬度（會撐大盒子這時候需要手動計算寬高）。為避免計算麻煩，常見實踐是將全局設置成 border-box，即 width 包含 padding 和 border，布局更直觀：

推薦的全局重置：

/* 推薦放在全局樣式最前面 */
*, *::before, *::after {box-sizing: border-box;
}

舉例對比

/* content-box (默認) */
.box1 { width:200px; padding:10px; border:2px solid #000; }
/* 實際外部寬度 = 200 + 10*2 + 2*2 = 224px *//* border-box */
.box2 { box-sizing:border-box; width:200px; padding:10px; border:2px solid #000; }
/* 實際外部寬度 = 200px（包含 padding 和 border） */

八、彈性盒子詳解（Flexbox — 一維布局）

彈性盒子（Flexbox）是用于在一維（行或列）方向上分配空間、對齊項目的強大工具，解決了傳統浮動/定位下很多對齊和伸縮問題。Flexbox 設計目標是靈活地控制項目在容器內的伸縮與對齊。

8.1 基本概念（容器 vs 項目）

Flex 容器（flex container）：對某個元素設置 display: flex;（或 inline-flex）后，該元素成為容器，子元素自動成為 flex items。
主軸（main axis）：容器布局的主方向，默認是橫向。
側軸 / 交叉軸（cross axis）：與主軸垂直的方向，常用于垂直對齊。

8.2 容器常用屬性（父元素）

display: flex; / inline-flex —— 啟用彈性布局。
flex-direction：主軸方向，row | row-reverse | column | column-reverse。
flex-wrap：是否換行，nowrap | wrap | wrap-reverse。
justify-content：沿主軸對齊（主軸空間分配），常用值 flex-start, center, flex-end, space-between, space-around, space-evenly。
align-items：沿交叉軸對齊（單行項目），常用 stretch, flex-start, center, flex-end, baseline。
align-content：當有多行時控制行與行之間的對齊（類似 justify-content 但作用于行）。
gap（現代瀏覽器支持）：容器項目之間的間距（替代用 margin 的 hack）。

容器示例：

<div class="container"><div class="item">A</div><div class="item">B</div><div class="item">C</div>
</div><style>
.container{display:flex;flex-direction:row;justify-content:center; /* 主軸居中 */align-items:center;     /* 交叉軸居中 */gap:12px;height:120px;
}
.item{padding:10px 16px;background:#e3f2fd;
}
</style>

8.3 項目常用屬性（子元素）

flex（簡寫） = flex-grow flex-shrink flex-basis，常用寫法如 flex: 1;（均分剩余空間）。
order：項目在主軸的排序（數字越小越靠前，默認 0）。
align-self：覆蓋容器的 align-items，針對單個項目設置交叉軸對齊方式。

項目示例（伸縮）

.item-a { flex: 2; } /* 占剩余空間的兩份 */
.item-b { flex: 1; } /* 占剩余空間的一份 */

8.4 常見布局模式 & 實戰技巧

水平導航欄：容器 display:flex; align-items:center;，子項設置間距。
垂直居中容器內單個元素：容器 display:flex; justify-content:center; align-items:center;，即可水平垂直都居中（非常實用）。
兩端對齊（左右兩端元素）：justify-content: space-between; 或用 margin-left: auto 將某項推到右側。
響應式： 用 flex-wrap: wrap; 讓項目在小寬度下自動換行；結合 flex-basis 控制每項基準寬度。