腾讯云双十一,阿里云_行内元素(inline标签)设置了行高为何不见效,照样表现为父盒子的行高?行内元素行高问题最终诠释

  • 腾讯云双十一,阿里云_行内元素(inline标签)设置了行高为何不见效,照样表现为父盒子的行高?行内元素行高问题最终诠释已关闭评论
  • 99 人浏览
  • A+
所属分类:首页

近来在看张鑫旭大佬的《css天下》,读到5.2.4  内联元素 line-height 的“大值特征” ,产生了迷惑,

在开发中确切也遇到了一样的问题,深切探讨后得出结果,先说结论吧,论证内容有点长,结论:

  行内元素本身并没有行高这个属性,虽然设置能够设置行高,然则终究作用的处所并非本身,而是其本身地点的行框盒子上!假如你不知道什么是行框盒子,发起你好好读读张大佬的《css天下》,这里我简朴的画一画

腾讯云双十一,阿里云_行内元素(inline标签)设置了行高为何不见效,照样表现为父盒子的行高?行内元素行高问题最终诠释

 

 

 如上如所示,我的结论是:

  内联盒子没有行高这一属性,给它设置line-height,终究是作用在行框盒子上,而行框盒子终究会取内部行高最高的谁人作为终究行高,而此行高将在其内部一切内联盒子中见效!

上代码:

<style>
       p{
           line-height: 96px;
       }
       span{
           line-height: 20px;
       }
</style>

<!--------分割线---------->

<p>
        <span>span标签中的笔墨</span>
</p>

为了让笔墨换行表现结果,我把浏览器缩窄一些,span标签中的笔墨放多一点,上述代码页面表现为:

腾讯云双十一,阿里云_行内元素(inline标签)设置了行高为何不见效,照样表现为父盒子的行高?行内元素行高问题最终诠释

 

 

 如上图,span的line-height属性确切设置上了,而且覆盖了继续的来自父元素p的line-height:96px;然则从换行来看,span的表现,依然是line-height:96px; !!

张大佬的书中只诠释了父盒子的高度问题,简朴回忆下:由于幽魂空缺节点继续了父元素p的行高,所以撑起了p元素的高,所以全部的高度为96px。根据张大佬的诠释明白,

span的行高应该是24px,幽魂空缺节点的行高为96px,行高撑起了高度,所以父元素的高度为最高的高度。

然则,这里经由过程换行我们能够发明span表现的并非20px,而是96px !而且经由过程调试器我们发明,上下调解span的line-height页面基础一点变化都没有,文风不动!

这时刻小白就要措辞了,行内元素的行高设置无效!智慧的你试一下就会发明,行内元素当然是能够设置行高属性的。那这里为何会设置无效呢?实在当你设置span的行高凌驾父元素的时刻,你就会发明,有意思的征象涌现了!

没错,span的行高见效了!

腾讯云双十一,阿里云_行内元素(inline标签)设置了行高为何不见效,照样表现为父盒子的行高?行内元素行高问题最终诠释

 

 

 那末问题来了,说不见效吧,比父元素行嵬峨的时刻它见效了,说见效吧,小于父元素行高的时刻若干都没用,什么情况?问题不急着回覆,再看下面一个例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
       p{
           line-height: 20px;
       }
       span{
           line-height: 40px;
       }
       em{
        line-height: 80px;
       }
       b{
        line-height: 160px;
       }
    </style>
</head>
<body>
    <p>
        <span>span标签中的笔墨</span><em>em中的笔墨</em><b>b中的笔墨</b>
    </p>
</body>
</html>

高度不用说,根据张大佬得出的大值特征,一定是160px。那行高呢?列位无妨猜猜终究的表现,

我猜你一定猜到了,没错,就是如许:

腾讯云双十一,阿里云_行内元素(inline标签)设置了行高为何不见效,照样表现为父盒子的行高?行内元素行高问题最终诠释

 

 

 连系上述盒子模子图,在这个例子中应该是如许的

腾讯云双十一,阿里云_行内元素(inline标签)设置了行高为何不见效,照样表现为父盒子的行高?行内元素行高问题最终诠释

 

 

 幽魂空缺节点继续父元素的行高属性 ,各个内联盒子本身有本身的行高属性,然则这些“行高属性”都不是作用在本身而是作用在如图的行框盒子上,

而行框盒子又反过来让其内的一切内联盒子表现出行高的特征。打个浅显点的比如讲就是,爸爸问本身的儿子们今晚吃啥,儿子们提看法,爸爸个中一个的看法后发出敕令,今晚人人都吃这个!

儿子们本身决议不了,但能够提看法,切回行高就是,内联盒子决议不了本身地点行的行高,然则能够通知行框盒子,我想是这么多!(line-height:***)

 

末了带来一个小例子,提示一下列位看官,行框盒子的行高也不是牢固,什么意思呢?照样上例的款式(为了轻易寓目,我为对应元素加上底色,

同时去掉margin和padding的影响),请看:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
       p{
           line-height: 20px;
       }
       span{
           line-height: 40px;
           background-color: red;
       }
       em{
        line-height: 80px;
        background-color: green;
       }
       b{
        line-height: 160px;
        background-color: blue;
       }
    </style>
</head>
<body>
    <p>
        <span>span标签中的笔墨很长很长很长很长很长很长很长很长很长很长很长很长</span>   
        <em>em中的笔墨很长很长很长很长很长很长很长很长很长很长很长很长</em>   
        <b>b中的笔墨很长很长很长很长很长很长很长很长很长很长很长很长</b>
    </p>
</body>
</html>

调解浏览器的宽度,使换行,结果以下:

腾讯云双十一,阿里云_行内元素(inline标签)设置了行高为何不见效,照样表现为父盒子的行高?行内元素行高问题最终诠释

 

 

 就不卖关子,直接说了,这里变成了如许:

一个包括盒子(包括块)p,4个行框盒子,4个行框盒子。

第一个行框盒子里包括了幽魂空缺节点+span标签的前部份,

第二个行框盒子包括了幽魂空缺节点、span标签的后部份和em标签的前部份,

第三个行框盒子包括了幽魂空缺节点、em的后部份和b标签的前部份,

第四个行框盒子包括了幽魂空缺节点、b标签的后部份。

四行表现的行高分别是 40px 、80px、160px、160px。

末了的末了来个总结:

1. 行内元素的line-height属性是去设置该元素地点行框盒子的行高,行框盒子取其内部一切内联盒子请求的行高的最大值,定为当前行的行高,一切内联盒子恪守这个终究行高来行事!

2.换行后生成新的行框盒子,新生成的行的行高,从新在当前行包括的内联盒子中提拔最高者定之!

腾讯云双十一活动