有山东群英会软件吗:line-height测量及使用

line-height测量及使用

山东群英会技巧 www.iba5.com.cn 1、line-height定义

line-height表示行高,即两行文字基线间的距离。

以下是图示说明:

行高是2条红线之间的距离,即:1+2+3+4

在实际测量中,基线不好找,可测量顶线到顶线的距离来代替行高。

2、行间距

line-height 与 font-size 的计算值之差(在 CSS 中成为“行间距”)分为两半,分别加到一个文本行内容的顶部和底部。

示例代码:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8" />
        <title>line-height行高测量</title>
        <style type="text/css">
            * {
                padding: 0;
                margin: 0;
                font-size: 14px;
            }
            
            .p {
                width: 200px;
                margin: 100px;
                line-height: 100px;
                border: 1px solid green;
            }
        </style>
    </head>

    <body>

        <div>
            中文abc12345
        </div>
    </body>

</html>

效果:

3、line-height取值

/*浏览器默认*/
                line-height: normal;
                /*设置数字,此数字会与当前的字体尺寸相乘来设置行间距*/
                line-height:100px;
                /*设置固定的行间距*/
                line-height: 1.8;
                /*基于当前字体尺寸的百分比行间距。*/
                line-height: 180%;

说明:line-height可以继承,但是后代元素会继承这个缩放因子而不是计算值。

4、inline box

inline元素所产生的inline box,就是容器中每个行级元素都会产生一个inline box,而多个行级元素排成一行就会有多个inline box,即inline boxes。

<p>            <span>行级元素1</span><span>行级元素2</span><em>行级元素3</em>行级元素4        </p>

以上HTML有4个inline box,解释如下:

  • p元素是一个容器,包裹了整个行级元素

  • 不带标签的文字也是一个隐藏的行级元素

所有行级元素(行级元素1、行级元素2、行级元素3和行级元素4)具有四个inline box,而每一行都会有一个line box,其实就是每一行所有inline boxes,inline boxes高度取的是最高的inline box的高度。

即:每一行中,文字和图片都是inline box,它们共同组成了一个line box,line box的高度取决于inline box中最高的元素。

5、图片不受line-height影响

本示例图片尺寸为150*150px。

示例代码:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8" />
        <title>line-height行高属性</title>
        <style type="text/css">
            * {
                padding: 0;
                margin: 0;
                font-size: 14px;
            }
            
            .p {
                margin: 100px;
                border: 1px solid red;
                line-height: 1.8;
            }
        </style>
    </head>

    <body>

        <div>
            <img src="dist/img/1_jslang.jpg" alt="尺寸为:150*150" /><span>az123</span>
        </div>
    </body>

</html>

效果:

 

说明:上图的图片和文字下有一个间距,因为img的对齐方式默认为为基线对齐!

将img的基线对齐改为底部对齐可去除下面的空白

img{
                vertical-align: bottom;
            }

效果:

 

此时line-height应该设置为图片的高度,即150px。

文字和图片垂直居中的示例代码为:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8" />
        <title>line-height行高属性</title>
        <style type="text/css">
            * {
                padding: 0;
                margin: 0;
                font-size: 14px;
            }
            
            .p {
                margin: 100px;
                border: 1px solid red;
                /*设置为图片的高度了*/
                line-height: 150px;
            }
            
            img {
                /*图片对齐方式改为底部对齐*/
                vertical-align: bottom;
            }
        </style>
    </head>

    <body>

        <div>
            <img src="dist/img/1_jslang.jpg" alt="尺寸为:150*150" /><span>az123</span>
        </div>
    </body>

</html>

效果:

 6、块级元素的高度和字体大小没有关系,是由行高决定。

示例代码:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8" />
        <title>line-height</title>
        <style type="text/css">
            * {
                padding: 0;
                margin: 0;
            }
            
            .test1 {
                line-height: 14px;
                font-size: 50px;
                background-color: #f00;
            }
            
            .test2 {
                line-height: 50px;
                font-size: 14px;
                background-color: #ccc;
            }
        </style>
    </head>

    <body>
        <br />
        <br />
        <p>
            我的行高是14px,字体大小是50px;
        </p>
        <br />
        <br />
        <p>
            我的行高是50px,字体大小是14px;
        </p>
    </body>

</html>

效果:

 

7、 行级元素元素的高度由字体大小决定,与行高无关。

 <!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8" />
        <title>line-height</title>
        <style type="text/css">
            * {
                padding: 0;
                margin: 0;
            }
            
            .test1 {
                line-height: 14px;
                font-size: 50px;
                background-color: #f00;
            }
            
            .test2 {
                line-height: 50px;
                font-size: 14px;
                background-color: #ccc;
            }
        </style>
    </head>

    <body>
        <br />
        <br />
        <br />
        <p>
            <span>我的行高是14px,字体大小是50px;</span>
        </p>
        <br />
        <br />
        <p>
            <span> 我的行高是50px,字体大小是14px;</span>
        </p>
    </body>

</html>

 

效果:

无数据提示还没有评论,楼主喊你快去抢前排~~~我要评论
微信扫码登陆
  • 尊重网络主权 发扬伙伴精神 2019-06-15
  • 打造-热门标签-华商生活 2019-06-07
  • 童国华委员:预计今年下半年5G进入规模试验阶段 2019-05-26
  • 中信国安葡萄酒业携尼雅等明星产品亮相首届中国自主品牌博览会 2019-05-25
  • 黑龙江严肃对待督察整改工作 2019-05-23
  • 可再生能源电价附加资金补助目录公布 2019-05-22
  • 关于益寿丹 竹林日记(0073) 2019-05-21
  • 中考TIPS 带证防雨留意天气变化 2019-05-21
  • 玉龙雪山、纳西风情…丽江旅游:卖的不是门票而是文化 未来积极融入东南亚旅游圈 2019-05-08
  • 市人大常委会召开党组会议传达学习全国两会精神张轩主持并讲话 2019-05-07
  • [囧][猜想]这有啥好战的? 2019-05-06
  • 廉政教育--安徽频道--人民网 2019-05-05
  • [鼓掌]小撸又来卖萌?那你给大家讲讲? 2019-05-04
  • 手机流量大战套路:“不限量”都是有条件的 2019-05-04
  • 按照马克思的原义,共产主义是"以每一个个人的全面而自由的发展为基本原则的社会形式"。这一基本原则的实现,涉及社会政治、经济、文化等方方面面。离开这一基本原则侈谈 2019-05-03
  • 416| 814| 931| 530| 751| 736| 830| 542| 291| 454| 611| 584| 85| 866| 180|