行盒的特徵 尺寸和定位

2021-10-01 15:33:28 字數 664 閱讀 6365

display屬性為inline(預設值)的元素

1.文字元素:span、em、abbr、strong、i、b,

2.和多**:img、video、audio,

3.頁面的具體內容(文字、、多**)都會生成行盒,頁面區域中包含內容,所以塊盒包含行盒塊盒內放置行盒,行盒內不要放置塊盒。

特徵

1.行盒可被折斷,因為內容可被折斷換行,

2.同乙個包含塊中,連續的多個行盒水平依次排列,空白摺疊的規則僅適用於行盒內部和行盒之間,

3.行盒與行盒可使用水平方向上的margin、border、padding設定內容之間的距離

尺寸

行盒—可替換元素行盒—非可替換元素

文字類元素

1.垂直方向上 margin、border、padding不佔頁面尺寸

2.width、height 必須設為自動,數值設定無效

3.可使用line-height設定一行文字高度

定位

1.行盒的定位體系必定為常規流

2.浮動和絕對定位的行盒會自動變為塊盒

3.行盒在包含塊中,避開浮動和常規流盒子

行盒的盒模型

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

行盒的盒模型

常見的行盒 包含具體內容的元素 span strong em i img video audio 盒子沿著內容延伸 行盒不能設定寬高 調整行盒的寬高,應該使用字型大小 行高 字型型別 間接調整。內邊距 填充區 水平方向有效,垂直方向不會實際佔據空間。邊框 水平方向有效,垂直方向不會實際佔據空間。外邊...

行快屬性和盒模型

display inline能將塊標籤轉化為行內標籤,可以讓塊標籤共處一行 display block能將行內標籤轉換為塊標籤,可以改變寬高 但是除了特殊情況一般不會用到這種方法 我是div 我是div 我是span 我是span text name text name margin 外邊距 bor...