一、常見的行盒模型
1、常見的行盒元素
包含具體內容的元素:span、strong、em、i、img、video、audio
2、行盒特點
● 盒子沿著內容沿伸
● 行盒寬width高height設置不生效
調整行盒的寬高,應該使用字體大小、行高、字體類型,間接調整。
● 內邊距(填充區)
水平方向有效,垂直方向不會實際佔據空間,只改變了背景高度
● 邊框border
水平方向有效,垂直方向不會實際佔據空間。
● 外邊距margin
水平方向有效,垂直方向不會實際佔據空間。
二、行塊盒
為了解決行盒在垂直方向的問題,引出了“行塊盒子”
使用方式:
display:inline-block 的盒子
1、特點
● 不獨佔一行
● 盒模型中所有尺寸都有效
2、應用--分頁按鈕
● 代碼:
● 效果:
三、可替換元素與非可替換元素
1、非可替換元素:大部分元素,頁面上顯示的結果,取決於元素內容
2、可替換元素:
頁面上顯示的結果,取決於元素屬性
3、常見可替換元素
img、video、audio
絕大部分可替換元素均為行盒,類似於行塊盒,盒模型中所有尺寸都有效
四、上一集
>>>