9.2 行盒line box
行盒line box是IFC模型的核心之一。
9.2.1 IFC与行盒line box相关的规范规则
（1）一个IFC内，各个inline-level元素排列方式：从父div顶部开始，依次水平排列。
（2）水平排列时，一行放不下会在下方新建一行。
（3）每一行形成的矩形区域称为行盒line box，每次换行即新建line box。
（4）line box的高度由相应规范规则决定。
（5）line box的宽度由父div决定。
（6）一行最右的一个inline元素放不下时，拆分到两行显示。默认情况下，如果是一个完整英文单词，不会拆分显示，全部换到下一行；中文每个字符视为一个单词。
9.2.2 行盒示例
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小步教程</title>
<style>
body{
font-family: Arial,微软雅黑;
font-size: 16px;
line-height: 60px;
margin: 20px 5px;
}
.div1{
padding: 0 30px;
border: 1px solid #ddd;
}
</style>
</head>
<body>
<div class="div1" >
<span class="span1">小步教程 xiaobuteach.com is </span>
<span class="span2"> good. </span>
<span class="span3"> 小步教程 xiaobuteachcom </span>
<span class="span4"> is </span>
<span class="span5">good.</span>
</div>
</body>
</html>
body设置字体三属性，font-family表示字体名，font-size字体大小，line-height表示line box高度60px；字体三属性是可继承属性，内部div与span继承它们。div1显示行数并不确定，窗口宽度足够大则一行全部显示，如果较小时则分两行显示。
场景1：一行内全部显示。
通过开发者工具查看父div的内容高度60px，等于line-height值。
场景2：缩小窗口宽度，分两行显示。
通过开发者工具查看父div的内容高度为120px，等于line-height*2。
9.2.3 line box示意图
IFC模型line box示意图
IFC布局模型前3级对象包括。
（1）行内格式化上下文IFC。由父div创建的逻辑对象。div1在内部创建的IFC记作IFC1。把IFC当作一个黑箱，标记虚线。IFC对内部inline元素进行管理。
（2）行盒line box。每一行对应一个line box对象。这里共2行，记作：line box1、line box2。
line box由浏览器根据自动换行情况而自动创建，开发人员不能直接设置与管理它，也无法通过开发者工具直接选择与调试它，只能间接调试。
核心问题：在哪里设置行盒line box的高度？IFC是逻辑对象，line box由浏览器创建，两者不出现在代码；inline元素在line box的内部，也不可能通过它设置。所以，父元素div1设置line-height表示line box的高度。
（3）块容器block container。对应inline-level元素的父div，即div1元素。内部只含有inline-level元素的块容器block container在内部创建IFC。按照标准做法，字体三属性应设置在块容器，而不是inline元素。字体三属性是可继承属性，所以通常首先在祖先元素body设置，然后各div根据需要进一步设置。
块容器后续简称父div，方便理解。
开发错误DevError009：胡乱给inline元素设置line-height导致显示不正常。
9.2.4 font复合属性
字体三属性可通过font进行简写，格式如下。
font: font-size/line-height font-family;
font-faimly的多个字体名称用逗号隔开。
font: 16px/60px Arial,微软雅黑;
实际项目line-height通常用比例值，表示相对于字体大小值的比例，通常在1.5左右。
font: 16px/1.5 Arial,微软雅黑;
