前端开发进阶教程:深入line-height

前端进阶响应式开发与常用框架|web前端开发精品课 htmlcss进阶教程|前端开发工程师的进阶

一、 line-height的定义

css中,line-height还有一个更加准确的定义:两行文字基线之间的距离。

1、顶线、中线、基线、底线

基线?这是什么东西?听都没听过!我们都用过英文簿,英文簿每一行都有4条线,这4条线分别是:(1)顶线;(2)中线;(3)基线;(4)底线。
在CSS中,每一行文字可以看成一个“行盒子”,而每一个行盒子都有4条线:(1)顶线;(2)中线;(3)基线;(4)底线。没错,这4条线跟英文簿中的4条线是一样的道理。
此外vertical-align属性中的top、middle、baseline、bottom这4个属性值分别对应的就是:顶线、中线、基线、底线。小伙伴们肯定情不自禁地惊叹一声:噢!原来是这样一回事!
注意一下,基线并不是行盒子中最下面的线,而是倒数第2条线。由此我们很清楚地知道line-height究竟指的是什么。
2、行高、行距与半行距

(1)行高
行高(即line-height),指的是“两行基线之间的垂直距离”,请看上图。
有些小伙伴就会问了:为什么W3C要这样去定义line-height呢?直接定义line-height为2条底线之间的距离岂不是更好理解么?规则这东西嘛,都是官方定义的,我们只需要去遵循就行了。这就跟我们过马路一样,没必要纠结为什么是“绿灯走红灯停”,而不是“红灯走绿灯停”。
(2)行距
行距,指的是:上一行的底线到下一行的顶线的垂直距离。也就是两行文字之间的空隙。
(3)半行距
半行距,很好理解,指的是行距的一半。
为什么要搞一个半行距出来呢?其实这就是为了引出在下面所提到的“行框(inline box)”。
3、内容区与行框
(1)内容区
内容区,指的是行盒子顶线到底线之间的垂直距离。
(2)行框
行框,指的是两行文字“行半距分割线”之间的垂直距离。

二、深入line-height

1、height和line-height
line-height有默认值,当没有定义line-height属性时,浏览器就会采用默认的line-height值。
一行文字的高度是由line-height决定,而不是由height决定的。例如在p标签中,一个p标签的文字可以有很多行,其中line-height定义的是一行文字的高度,而height定义的是整个段落的高度(p标签的高度)。
在CSS中,我们可以定义height和line-height这2个属性值相等,从而来实现单行文字的垂直居中。这是经常使用到的一个技巧,希望大家记住。
举例:
html 代码

<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
    <title>web前端开发工程师 培训</title>
    <style type=”text/css”>
        div {
            width: 240px;
            height: 60px;
            border: 1px solid gray;
            font-size: 12px;
            text-align: center;
        }
        #div1 {
            line-height: 20px;
        }
        #div2 {
            line-height: 40px;
        }
        #div3 {
            line-height: 60px;
        }
    </style>
</head>
<body>
    <div id=”div1″>height为50px,line-height为20px</div>
    <div id=”div2″>height为50px,line-height为40px</div>
    <div id=”div3″>height为50px,line-height为60px</div>
</body>
</html>

分析:
为什么定义height和line-height这2个属性值相等,就可以实现单行文字的垂直居中呢?从上面这个例子,我们可以很直观而感性地认知。
2、line-height取值为百分比值、em值
当line-height值为百分比值或者em值时,当前元素的行高是相对于“父元素”的font-size值来计算的。计算公式如下:
line-height = (父元素font-size)×(百分比)
line-height = (父元素font-size)×(em值)
举例:
html 代码

<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
    <title>前端开发如何进阶</title>
    <style type=”text/css”>
        body {
            font-size: 30px;
        }
        #outer-box {
            /*父元素行高:30px×150%=45px*/
            line-height: 150%;
            background-color: Red;
            color: White;
        }
        #inner-box {
            /*子元素行高:30px×150%=45px(继承父元素的line-height)*/
            font-size: 20px;
            background-color: Purple;
            color: White;
        }
    </style>
</head>
<body>
    <div id=”outer-box”>这是父元素
        <div id=”inner-box”>这是子元素</div>
    </div>
</body>
</html>
分析:
在上面这段代码中,#outer-box的行高等于30px×1.5=45px。由于line-height具有继承性,当line-height取值为百分比时,会直接继承父元素的line-height(除非自己指定line-height)。
 3、line-height取值为无单位数字
line-height还支持无单位数字的属性取值,在CSS中也只有line-height属性具有这个特点。当line-height值为无单位数字时,实际的行高是相对于“当前元素”的font-size值来计算的。计算公式如下:
line-height = (当前元素的font-size)×(无单位数字)
 举例:
html 代码
<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
    <title>前端开发应用实例</title>
    <style type=”text/css”>
        body {
            font-size: 30px;
        }
        #outer-box {
            /*父元素行高:30px×1.5=45px*/
            line-height: 1.5;
            background-color: Red;
            color: White;
        }
        #inner-box {
            /*子元素行高:20px×1.5=30px(继承父元素的系数)*/
            font-size: 20px;
            background-color: Purple;
            color: White;
        }
    </style>
</head>
<body>
    <div id=”outer-box”>这是父元素
        <div id=”inner-box”>这是子元素</div>
    </div>
</body>
</html>
分析:
在上面这段代码中,#outer-box的行高等于30px×1.5=45px,#inner-box的行高等于20px×1.5=30px。也就是说当line-height取值为无单位数字时,该无单位数字可以理解为一个系数。子元素继承的是父元素的系数,不会直接继承父元素的line-height。

前端开发中如何实现修改功能|web前端开发就业优势|没有基础能学会前端开发
» 本文来自:前端开发者 » 《前端开发进阶教程:深入line-height》
» 本文链接地址:https://www.rokub.com/3829.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!