盒子沿著內容延伸
行盒不能設定寬高–用字型大小 行高字型型別間接調整行盒的寬高
內邊框(填充區)–水平方向有效,垂直方向不會實際佔據空間
邊框–水平方向有效,垂直方向不會實際佔據空間
外邊距–水平方向有效,垂直方向不會實際佔據空間
display:inline-block 的盒子
不獨佔一行
盒模型中所有尺寸都有效
下面是利用行塊盒書寫翻轉頁面
"pager">
"">1
"">2
"" class="shi-shi">3
"">4
"">5
"">6
"">7
"">8
"">9
"">10
空白摺疊發生在行盒(包含行塊盒)內部 或 行盒(包含行塊盒)之間
大部分元素,頁面上顯示的結果,取決於元素內容,稱為:非可替換元素
大部分元素,頁面上顯示的結果,取決於元素屬性,稱為:可替換元素
可替換元素:img ivdeo aodio
絕大部分可替換元素均為行盒
可替換元素類似於行塊盒,盒模型中所有尺寸都有效
行盒的盒模型
常見的行盒 包含具體內容的元素 span strong em i img video audio 盒子沿著內容延伸 行盒不能設定寬高 調整行盒的寬高,應該使用字型大小 行高 字型型別 間接調整。內邊距 填充區 水平方向有效,垂直方向不會實際佔據空間。邊框 水平方向有效,垂直方向不會實際佔據空間。外邊...
行盒子的盒模型
常見的行盒 包含具體內容的元素 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...