行盒

行盒格式化上下文(IFC):Inline Formatting context

所有文本类必须包含在行盒内，如果是直接写在块盒内，浏览器会自动创建一个匿名行盒。

概念：display为Inline（默认值）的元素

• 文字必须放置到行盒内，否则会生成匿名行盒。
• 图片和多媒体默认会生成行盒

页面区域中包含内容，所以块盒包含行盒。注：应该在块盒内放置行盒，行盒内尽量不要放置块盒。


行盒的特点：

​        1、行盒可被折断，因为内容可以被折断换行

​              断词规则

​              默认情况:

​              英文按单词断词。

​              使用了word-break:break-all后

​              英文按字母，

​              中文按汉字

​        2、连续的多个行盒水平依次排列，直到占满可用宽度，自动换行

​        3、空白折叠规则只适用于行盒内部和行盒之间

​             空白折叠:多个空格或回车会折叠成一个空格

​        4、可使用水平方向上的margin和padding设置内容之间的距离。

​             垂直方向上，在页面上会展示，但是不占用实际尺寸，水平方向上会占用尺寸

行盒的尺寸:盒模型中各个部分与块盒一致

​
行内元素：

• 可替换元素：元素的显示内容，由其属性决定（尖括号里面设置），如img、video 、audio，且可以设置宽和高，文本内容会自动创建一个匿名块盒。
• ​ 不可替换元素：元素的显示内容，由元素决定。

​ 对于图片和视频，仅设置宽高中的一个时，另一个自动按照比例适应。

​ 对于图片和视频，如果同时设置宽高，可通过object-fit属性设置适应方法。

图片渲染区域:object-fit

​ 概念：内容尺寸如何适应，只适用于可替换元素

​ 取值:

       contain——图片等比例放大的范围，放大到最大值后，不会再放大。
       即，达到最小值的边距，另一个值（宽或高）就不会再放大了。

       cover：保持宽高比例缩放，充满设置的尺寸，某些部分会被隐藏。

       fill：无视宽高进行缩放。

不可替换元素的尺寸：

       垂直方向上的margin、border、padding不占据布局空间.

       可使用line-height设置一行的文字高度，

行盒的位置：行盒的定位体系必定是常规流。浮动和绝对定位的盒子会自动变成块盒

       行盒在包含块中，避开浮动和常规流盒子。

       包含行盒的块盒，可使用text-align调整行盒在它内部的对齐方式。

       行盒之间的对齐方式，可使用vertical-align调整。