9.8 盒子模型与bounds模型的关系
一个inline元素既有盒子，又有bounds，盒子模型与bounds模型同时存在生效。
9.8.1 两者关系
一个inline元素既有盒子，又有bounds，盒子模型与bounds模型同时存在生效。
（1）占位。bounds模型用于垂直占位，盒子模型用于水平占位；
（2）显示。盒子模型用于水平与垂直的显示。
（3）公用区域。两者的内容区域content是同一块区域。
（4）盒子模型在内容区域的基础上，加padding与border。
inline元素的box总高度=border-top + padding-top + content-height + padding-bottom + border-bottom
（5）bounds模型在内容区域的基础上，上下各加L/2的间距。
inline元素的bounds高度 = line-height绝对值 = L/2（顶部） + content-height + L/2 （底部）
（6）bounds高度可能大于、等于或小于盒子高度。
（7）开发者工具选择元素时，页面显示的盒子尺寸是border及内部的宽高。
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小步教程</title>
<style>
body{
margin: 20px 5px;
}
.div1{
padding: 0 30px;
border: 1px solid #ddd;
}
.span1{
color: #666;
}
.span2{
color: #0aaa76 ;
}
.span3{
color: #4aa6fc;
}
.span4{
color: #ed7d31;
}
.span5{
color: #0aaa76;
}
.span1{
padding-top: 2px;
padding-bottom: 2px;
border-top: 20px solid #7030a0;
border-bottom: 20px solid #7030a0;
}
</style>
</head>
<body>
<div class="div1" style="font-family: Arial;font-size: 30px;line-height: 50px;">
<span class="span1">xiaobuteach is a </span>
<span class="span2"> good teacher.</span>
<span class="span3">x</span>
<span class="span4">xiaobuteach.com is </span>
<span class="span5">good.</span>
</div>
</body>
</html>
运行效果
删除span1的垂直方向的padding、border设置，不影响所有元素的垂直位置，只是不显示边框。
.span1{
/* padding-top: 2px;
padding-bottom: 2px;
border-top: 20px solid #7030a0;
border-bottom: 20px solid #7030a0; */
}
运行效果
9.8.2 利用盒子模型验算bounds模型的L值
浏览器开发者工具目前无法直接查看bounds尺寸，可通过盒子模型间接验算。
当父元素div1的上下border（桔色边框）与子元素span1的上下border（蓝色、待调节值）亲密接触，则子元素的上下border等于上下L值。
条件要求：div内只有一个line box，且没被撑高。
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小步教程</title>
<style>
body{
margin: 20px 5px;
}
.div1{
padding: 0 30px;
border-top: 1px solid #ed7d31;
border-bottom: 1px solid #ed7d31;
}
.span1{
border-top: 8px solid #4aa6fc;
border-bottom: 9px solid #4aa6fc;
}
</style>
</head>
<body>
<div class="div1" style="font-family: Arial;font-size: 30px;line-height: 50px;">
<span class="span1">xiaobuteach.com is good </span>
</div>
</body>
</html>
则好相等、超出、不足时运行效果如下图所示。
调整span的border-top与border-bottom的值分别是8px、9px，使border与父div的border亲密接触，则两值等于上下L值。
验算。Arial的bounds内容高度比1.12，font-size30px，则内容高度33.6取整33px，line-height即bounds高度50px，L=50-33=17px，上下各分配8px、9px。与显示结果一致。
9.8.3 line-height等于height进行垂直居中
实际项目经常使用line-height与height进行单行文本在块容器的垂直居中。实际上在bounds模型，bounds内容区在bounds高度内天然就是垂直居中，因为上下各L/2，不需要设置height属性就是垂直居中。
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小步教程</title>
<style>
body{
margin: 8px 20px;
font-family: Arial;
font-size: 14px;
line-height: 1.5;
}
.div1{
border: 1px solid #ed7d31;
line-height: 50px;
}
</style>
</head>
<body>
<div class="div1">
<span>xiaobuteach.com is good </span>
</div>
</body>
</html>
运行效果
span的bounds高度等于line-height值50px，div1内容区高度等于bounds高度50px。上述代码，没有设置div1的height属性就实现垂直居中。
实际项目场景，通常需要先固定height值然后再调整垂直居中，所以将line-height设置相同即可。
box-sizing默认值content-box，height表示内容区高度；如果box-sizing值border-box，height表示含border高度。严格来说，需要调整值保证内容区高度与line-height值相同。
示例代码
.div1{
border: 10px solid #ed7d31;
box-sizing: border-box;
height: 50px;
line-height: 30px;
}
height与line-height相等实现垂直居中，本质属于父div的盒子模型与内部IFC模型的结合使用。
height与line-height的常见场景。单行文本时，当父div内容区高度等于内部单行line box高度，实现垂直居中；单行文本时，当父div内容区高度大于内部单行line box高度，父div在line box下方多出空白，效果表现为文本偏上；单行文本时，如果div内容区高度小于内部单行line box高度，超出高度部分溢出显示。多行文本时，当父div内容区高度等于内部单行line box高度，则小于多个line box高度之和，超出部分溢出显示。
