一.行盒
什么是行盒：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调整
二.行块盒
什么是行块盒 ： display 属性值为inline-block 元素生成的盒子
与行盒的区别：
a.行块盒内部可以放块盒，行盒不行 ;
b.行块盒的所有盒模型尺寸都是有效的，而行盒不行 ;
c.行盒垂直方向上margin、border、padding的尺寸不占据空间 ;
d.行高不能设置宽高 ;
e.行块盒通常用于宽高自动的水平居中.
标签：多媒体,宽高,行块,行盒,设置,图片 来源： https://www.cnblogs.com/youwei716/p/10993413.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。