行盒的盒模型

常見的行盒：包含具體內容的元素

span、strong、em、i、img、video、audio

盒子沿著內容延伸

行盒不能設定寬高

調整行盒的寬高，應該使用字型大小、行高、字型型別、間接調整。

內邊距（填充區）

水平方向有效，垂直方向不會實際佔據空間。邊框

水平方向有效，垂直方向不會實際佔據空間。

外邊框

水平方向有效，垂直方向不會實際佔據空間。

display: inline-block 的盒子

不獨佔一行

盒模型中所有尺寸都有效

空白摺疊，發生在行盒（行塊盒）內部 或 行盒 （行塊盒）之間

大部分元素，頁面上顯示的結果，取決於元素內容，稱為非可替換元素

少部分元素，頁面上顯示的結果，取決於元素屬性，稱為可替換元素

可替換元素：img、video、audio

絕大部分可替換元素均為行盒

可替換元素類似於行塊盒，盒模型中所有尺寸都有效。

行盒的盒模型

盒子沿著內容延伸 行盒不能設定寬高 用字型大小 行高字型型別間接調整行盒的寬高 內邊框 填充區 水平方向有效,垂直方向不會實際佔據空間 邊框 水平方向有效,垂直方向不會實際佔據空間 外邊距 水平方向有效,垂直方向不會實際佔據空間 display inline block 的盒子 不獨佔一行 盒模型中...

行盒子的盒模型

常見的行盒 包含具體內容的元素 span,strong,em i,img,video,audio 盒子沿著內容衍生 行盒不能設定寬高，行盒的寬高是根據內容的大小和多少決定的。調整行盒的大小應該使用字型的大小，行高，字型型別，間接調整。內邊距 填充區 水平方向有效，垂直方向只影響背景，不會佔據具體空間...

標準盒模型 怪異盒模型 彈性盒模型

box sizing content box 標準盒模型 標準盒模型總寬度 border2 padding2 content box sizing border box 怪異模式 怪異盒模型的總寬度 width margin 左右 width已經包含了padding和border值 flex dir...