行盒

1. 什么是行盒：display属性为inline的元素

2. 行盒的特征

   • 行盒可被折断，因为内容可被折断换行（可通过word-break属性设置截断位置）
     • word-break属性
       • normal:英文单词换行，中文单字换行原则
       • keep-all：空白，标点，换行原则
       • break-all：英文字母换行，中文单字换行原则
   • 同一个包含块中，连续的多个行盒水平依次排列
   • 空白折叠的规则仅适用于行盒内部和行盒之间
   • 行盒与行盒之间的距离可使用水平方向上的margin和padding进行设置

3. 行盒的尺寸

   • 可替换元素：图片、多媒体
     • 与块盒完全一致
     • 对于图片和视频，仅设置宽高中的一个时，另一个会自动按比例适应
     • 对于图片和视频，如果同时设置宽高，可通过object-fit属性设置适应方式
       • object-fit:缩放规则
         • fill：无视宽高比理缩放，充满设置的尺寸
         • contain：保持宽高比例缩放，保证不超出内容盒
         • cover：保持宽高比例缩放，充满尺寸，某些部分被隐藏掉
         • none：不进行缩放
   • 非可替换元素：文本元素
     • 垂直方向上 margin、border、padding不占页面尺寸
     • width、height 必须设为自动，数值设定无效
     • 可使用line-height设置一行文字高度

4. 行盒的定位

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