深度行盒与行块盒(空白,参考线,行盒右拉伸)

Posted lipmtb

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了深度行盒与行块盒(空白,参考线,行盒右拉伸)相关的知识,希望对你有一定的参考价值。

容器内的行块盒和行盒

  <!-- 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 可以设置行盒或者行块盒

以上是关于深度行盒与行块盒(空白,参考线,行盒右拉伸)的主要内容,如果未能解决你的问题,请参考以下文章

BFC 块级格式化上下文

BFC

前端面试题--CSS篇

前端面试题--CSS篇

第八篇 css

CSS学习盒模型