深度行盒与行块盒（空白，参考线，行盒右拉伸）

Posted 2020-11-22 lipmtb

容器内的行块盒和行盒

  <!-- 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>

总结

1. 文字的大小由: font-size,font-family,line-height决定
   设置文字的相对大小时候px,em,百分比，文字的内容实际高度content-area通常高于设置的值（不同的font-family比例不同，同一种文字比例相同，按比例计算），而且还有字体设计者设置的默认行高（行高>=0）
2. 图片(可替换元素)和无子元素的inline-block元素的行为类似，都是下外边距作为参考线

3. 一个元素内部有行盒（或者行块盒），且font-size>0时，该元素会产生参考线

4. 行盒子右边有行盒子（有文本的）或者行块盒（任意的，甚至宽高0，无子元素）会导致该元素右伸展
5. 行块盒与行盒或者行块盒之间 ，如果之间有空隙发生空白折叠（代码书写的多个换行或者空格合并为一个），空白大小由该元素包含块的font-size大小决定

6. vertical-align 可以设置行盒或者行块盒