其他分享
首页 > 其他分享> > 行盒的特征,尺寸和定位

行盒的特征,尺寸和定位

作者:互联网

什么是行盒:display属性为inline的元素。

常见行盒:文字元素:span、abbr、em、i、strong、b 图片和多媒体:img、video、audio 
含义:页面具体内容(文字、图片、多媒体)都会生成行盒,(注意:文字:必须放置到行盒内,否则会生成匿名行盒;图片和多媒体:默认会生成行盒,通常不要对它们的盒子类型进行改动)

行盒显著特征

1.行盒可被折断,因为内容可被折断换行(可通过word-break属性设置截断位置);

2.同一个包含块中,连续的多个行盒水平依次排列 ;

3.空白折叠的规则仅适用于行盒内部和行盒之间 ;

4.行盒与行盒之间的距离可使用水平方向上的margin和padding进行设置。

  

行盒的尺寸

行盒可替换元素:图片和多媒体;

a.与块盒完全一致;

b.对于图片和视频,仅设置宽高中的一个时,另一个会自动按比例适应

c.对于图片和视频,如果同时设置宽高,可通过object-fit属性设置适应方式

行盒文字类元素:

设置width与height无效;垂直方向上的margin、border、padding不占据布局空间;可使用line-height设置一行的文字高度。

行盒的定位

行盒在包含块中,会避开浮动和常规流,浮动和绝对定位的盒子自动变为块盒; 
包含行盒的块盒,可使用text-align调整行盒在它内容的对齐方式; 
行盒之间的对齐可以使用vertical-align调整

标签:文字,定位,多媒体,元素,尺寸,设置,行盒,图片
来源: https://www.cnblogs.com/sunhaobin/p/12079836.html