！盒模型

1.標準盒模型（box-sizing: content-box）

width 和 height 僅指 content 的大小
實際寬度 = width + padding-left + padding-right + border-left + border-right
實際高度 = height + padding-top + padding-bottom + border-top + border-bottom

2.IE 盒模型（box-sizing: border-box）

width 和 height 包括了 content、padding 和 border
更適合布局，避免寬度失控

！margin & padding

1.margin、padding是什么

margin 是外邊距，控制元素與其他元素之間的距離；padding 是內邊距，控制元素內容與邊框之間的距離。

2. 應用

屬性	是否影響尺寸	是否疊加
margin	不影響元素本身尺寸	會發生合并（垂直方向）
padding	會擴大元素盒子尺寸（除非使用 box-sizing: border-box）	不會合并

一、塊級元素（block）

1.特性

• 獨占一行
• 可設置寬、高、內外邊距等屬性
• 默認寬度：若未設置，默認擴展至父元素寬度
• 可包含其他元素

2. 常見塊級元素

元素	解釋
div	通用的容器元素，常用于創建布局塊
p	段落元素
h1-h6	標題元素
ul、ol、li	無序列表、有序列表和列表項
table	表格元素
form	表單元素
header	頁眉元素
footer	頁腳元素
nav	導航元素
article	文章元素
section	節元素
main	主內容元素
aside	側邊欄元素
figure 和 figcaption	用于包含圖像、圖表、視頻等內容及其標題或說明

二、行內元素（inline）

1.特性

• 不強制換行，多個行內元素一行顯示
• 寬高由內容決定，不能直接設置寬高
• 可以設置左右外邊距，左右內邊距
• 上下內邊距和外邊距對布局沒有影響

2.常見行內元素

元素	解釋
a	超鏈接
span	段落元素
strong	粗體顯示
em	斜體顯示
img	圖像

3.Tips

HTML5 中，a元素可以包含塊級元素

三、行內塊元素（inline-block）

1.特性

• 允許同一行排列，但是之間會有空白縫隙，設置它上一級的 font-size 為 0，會消除間隙；
• 可設置寬、高、內外邊距

2.常見行內塊元素

元素	解釋
button	按鈕
input	替換元素，具體表現取決于它的類型屬性（如text, checkbox, radio等）
textarea	允許輸入多行文本
select	創建下拉列表