容器内的行块盒和行盒
<!-- test1: 关于行盒和行块盒的空白折叠问题 -->
<!-- 行块盒右边的空白折叠为一个 （操作：切换span2的display为inline ,往右书写ggg1的位置）-->
<div class="div-span" style='border:1px solid;margin:10px;font-size:16px;font-family:cursive;'>
<span class="span1" style="display:block;font-size:32px;background-color:rgb(252, 240, 171);">ggg1
</span>
<span class="span2" style="display:inline-block;font-size:64px;background-color:rgb(252, 183, 171);">ggg1
</span> ggg1
</div>
<!-- 行盒的右边空白忽略 -->
<div class="div-span" style='border:1px solid;margin:10px;font-size:16px;font-family:cursive;'>
<span class="span1" style="display:block;font-size:32px;background-color:rgb(252, 240, 171);">ggg1
</span>
<span class="span2" style="font-size:32px;background-color:rgb(252, 183, 171);">ggg1
</span>
ggg1
</div>
<!-- test2:行块盒与行块盒 -->
<!-- 行块盒右边的空白折叠为一个，由父元素的font-size控制大小 -->
<div class="div-span" style='border:1px solid;margin:10px;font-size:16px;font-family:cursive;'>
<span class="span1" style="display:inline-block;font-size:32px;background-color:rgb(252, 240, 171);">ggg2
</span><span class="span2" style="display:inline-block;font-size:64px;background-color:rgb(252, 183, 171);">ggg2
</span>
<span class="span3" style="display:inline-block;font-size:32px;background-color:rgb(247, 87, 161);">ggg2
</span>
</div>
<div class="div-span" style='border:1px solid;margin:10px;font-size:16px;font-family:cursive;'>
<span class="span1" style="display:inline-block;font-size:32px;background-color:rgb(252, 240, 171);">ggg2
</span><span class="span2" style="display:inline-block;font-size:64px;background-color:rgb(252, 183, 171);">ggg2
</span>
<span class="span3" style="display:inline-block;font-size:32px;background-color:rgb(247, 87, 161);">ggg2
</span>ggg2 ggg2
</div>
<!--test3: 行盒与行盒 (特别) -->
<!-- 行盒子后面摆放"行盒"(有文本就有)，前一个行盒子出现右拉伸 -->
<div class="div-span" style='border:1px solid;margin:10px;font-size:16px;font-family:cursive;'>
<span class="span1" style="font-size:32px;background-color:rgb(252, 240, 171);">ggg3
</span>
<span class="span2" style="font-size:64px;background-color:rgb(252, 183, 171);">ggg3
</span> ggg3 ggg3
</div>
<div class="div-span" style='border:1px solid;margin:10px;font-size:16px;font-family:cursive;'>
<span class="span1" style="font-size:32px;background-color:rgb(252, 215, 8);">ggg3
</span>
<span class="span2" style="font-size:0px;background-color:rgb(255, 1, 1);">ggg3
</span>
</div>
<!-- test4: 行盒子后面摆放"行块盒"，前一个行盒子出现右拉伸 -->
<div class="div-span" style='border:1px solid;margin:10px;font-size:16px;font-family:cursive;'>
<span class="span1" style="font-size:32px;background-color:rgb(194, 252, 171);">ggg4
</span>
<span class="span2"
style="display:inline-block;font-size:64px;background-color:rgb(52, 247, 3);">
</span>
</div>
<!-- test5: span2后面无行盒子或者行块盒子，无右拉伸 -->
<div class="div-span" style='border:1px solid;margin:10px;font-size:16px;font-family:cursive;'>
<span class="span1" style="font-size:32px;background-color:rgb(194, 252, 171);">ggg5
</span>
<span class="span2" style="font-size:64px;background-color:rgb(252, 203, 171);">ggg5
</span>
</div>
<!-- test6: 行盒左右两边一个行块盒 -->
<div class="div-span" style='border:1px solid;margin:10px;font-size:16px;font-family:cursive;'>
<span class="span2"
style="display:inline-block;height:60px;width:100px;font-size:64px;background-color:rgb(252, 171, 171);">
</span><span class="span1" style="font-size:32px;background-color:rgb(194, 252, 171);">ggg6
</span>
<span class="span2"
style="display:inline-block;height:60px;width:100px;font-size:64px;background-color:rgb(252, 203, 171);">
</span>
</div>
<!-- test7: 去掉ggg77效果一样，说明父元素有参考线 -->
<div class="div-span" style='border:1px solid;margin:10px;font-size:16px;font-family:cursive;'>
<span class="span2"
style="display:inline-block;height:40px;width:100px;font-size:64px;background-color:rgb(252, 171, 171);">
</span>
<span class="span2"
style="display:inline-block;height:60px;width:120px;background-color:rgb(197, 83, 7);">
</span>
ggg77
</div>总结
- 文字的大小由: font-size,font-family,line-height决定
设置文字的相对大小时候px,em,百分比，文字的内容实际高度content-area通常高于设置的值（不同的font-family比例不同，同一种文字比例相同，按比例计算），而且还有字体设计者设置的默认行高（行高>=0） - 图片(可替换元素)和无子元素的inline-block元素的行为类似，都是下外边距作为参考线
一个元素内部有行盒（或者行块盒），且font-size>0时，该元素会产生参考线
- 行盒子右边有行盒子（有文本的）或者行块盒（任意的，甚至宽高0，无子元素）会导致该元素右伸展
- 行块盒与行盒或者行块盒之间 ，如果之间有空隙发生空白折叠（代码书写的多个换行或者空格合并为一个），空白大小由该元素包含块的font-size大小决定
vertical-align 可以设置行盒或者行块盒