行盒的盒模型

2021-10-04 07:46:24 字數 655 閱讀 3245

盒子沿著內容延伸

行盒不能設定寬高–用字型大小 行高字型型別間接調整行盒的寬高

內邊框(填充區)–水平方向有效,垂直方向不會實際佔據空間

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

外邊距–水平方向有效,垂直方向不會實際佔據空間

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...