一、line-height语法

line-height属性的具体定义列表如下：

语法： line-height : normal | <实数> | <长度> | <百分比> | inherit

说明： line-height 属性设置行间的距离（行高），不能使用负值。该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。line-height 与 font-size 的计算值之差(行距)分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。

可能的值：

值 说明
normal 默认,设置合理的行间距。
number 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。相当于倍数
length 设置固定的行间距。
% 基于当前字体尺寸的百分比行间距。
inherit 规定应该从父元素继承 line-height 属性的值。

二、line-height中顶线、中线、基线、底线的实例说明

 
HTML 代码   复制

<!DOCTYPE html>


<html>


    <head>


        <title>Test</title>


        <style type="text/css" >

            span

            {

                padding:0px;

                line-height:1.5;

            }

        </style>

    </head>

    <body>

        <div class="test">

            <div style="">

                <span style="font-size:3em;">中文English</span>

                <span style="font-size:3em;">English中文</span>

            </div>

        </div>

    </body>

<html>

图示说明

从上到下四条线分别是顶线、中线、基线、底线，很像才学英语字母时的四线三格，我们知道vertical-align属性中有top、middle、baseline、bottom，就是和这四条线相关。

尤其记得基线不是最下面的线，最下面的是底线。

三、line-height中行高、行距与半行距

行高是指上下文本行的基线间的垂直距离，即图中两条红线间垂直距离。

行距是指一行底线到下一行顶线的垂直距离，即第一行粉线和第二行绿线间的垂直距离。

半行距是行距的一半，即区域3垂直距离/2，区域1，2，3，4的距离之和为行高，而区域1，2，4距离之和为字体size，所以半行距也可以这么算：（行高-字体size）/2

图片说明

四、line-height中内容区、行内框、行框

内容区：底线和顶线包裹的区域，即下图深灰色背景区域。

行内框，每个行内元素会生成一个行内框，行内框是一个浏览器渲染模型中的一个概念，无法显示出来，在没有其他因素影响的时候（padding等），行内框等于内容区域，而设定行高时行内框高度不变，半行距【（行高-字体size）/2】分别增加/减少到内容区域的上下两边（深蓝色区域）

行框（line box），行框是指本行的一个虚拟的矩形框，是浏览器渲染模式中的一个概念，并没有实际显示。行框高度等于本行内所有元素中行内框最大的值（以行高值最大的行内框为基准，其他行内框采用自己的对齐方式向基准对齐，最终计算行框的高度），当有多行内容时，每行都会有自己的行框。

例如

<div style="">


                <span style="font-size:1em;">中文English</span>


                <span style="font-size:3em;">中文English</span>


                <span style="font-size:3em;">English中文</span>


                <span style="font-size:1em;">English中文</span>


            </div>

图片说明

五、定义line-height的方式

1、line-height可以被定义为normal。

2、line-height可以被定义为继承

p { line-height:inherit; }

3、line-height可以使用一个百分比的值

p { line-height:120%; }

4、line-height可以被定义为一个长度值（单位px、em等）

p { line-height:20px; }

5、line-height也可以被定义为纯数字（甚至没有单位）

p { line-height:1.2; }

css行高line-height的用法的更多相关文章

  1. 深入了解css的行高Line Height属性

    什么是行间距? 古时候我们使用印刷机来出来文字.印刷出来的每个字,都位于独立的一个块中. 行间距,即传说中控制两行文字垂直距离的东东.在CSS中,line-height被用来控制行与行之间垂直距离. ...

  2. 【转】css行高line-height的一些深入理解及应用

    一.前言 前两天在腾讯ISD团队博客上看到一篇翻译的文章“深入理解css 行高”,是个不错的文章,学到了不少东西,建议您看看. 这里,我也要讲讲我对line-height的一些理解,所讲解的东西绝大多 ...

  3. CSS行高——line-height 垂直居中等问题

    CSS行高——line-height   初入前端的时候觉得CSS知道display.position.float就可以在布局上游刃有余了,随着以后工作问题层出不穷,才逐渐了解到CSS并不是几个sty ...

  4. css - 行高

    css - 行高 line-height行高 取值:px | em | rem | 百分比 | 纯数字 | normal | inherit 设置给:块.行内.行内块 应用给:文本 继承:块.行内.被 ...

  5. 李洪强和你一起学习前端之(6)css行高,盒模型,外边距

    李洪强和你一起学习前端之(6)css行高,盒模型,外边距 复习昨天的知识 1.1css书写位置: 内嵌式写法 外联式写法 <link href = "1.css" rel = ...

  6. CSS行高--line-height

    遇到的问题:在css中,不理解line-height:1与line-height:1px的区别 发现的过程:最近在学做一个网站的过程中,设置两行文字之间的行高时需要用到line-height,发现了这 ...

  7. css行高line-height的用法（转）

    本文导读: “行高“指一行文子的高度,具体来说是指两行文子间基线间的距离.在CSS,line-height被用来控制行与行之间的垂直距离.line- height 属性会影响行框的布局.在应用到一个块 ...

  8. css行高的用法总结

    css没有提供一个直接设置行间距的方式,所以只能通过设置行高来间接的设置行间距,行高越大行间距就越大,用 line-height 来设置行高. .p1 { /* 设置行高 */ line-height ...

  9. CSS行高line-height的学习

    一.定义和用法 line-height 属性设置行间的距离(行高). 可能的值 normal默认.设置合理的行间距. number设置数字,此数字会与当前的字体尺寸相乘来设置行间距. length设置 ...

随机推荐

  1. JavaScript constructor 属性详解

    对象的constructor属性用于返回创建该对象的函数,也就是我们常说的构造函数. 在JavaScript中,每个具有原型的对象都会自动获得constructor属性.除了arguments.Enu ...

  2. [STL] 遍历删除两个vector中交集

    #include <vector> #include <string> #include <algorithm> using namespace std; int ...

  3. [剑指Offer] 6.旋转数组的最小数字（二分法）

    题目描述 把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转.输入一个非递减排序的数组的一个旋转,输出旋转数组的最小元素.例如数组{3,4,5,1,2}为{1,2,3,4,5}的一个旋转 ...

  4. 左右躲避障碍-神手ts版本

    TypeScript-左右躲避障碍-神手 学习typescript,第一步应该是学习官方文档,理解最基础的语法.第二步开始用typescript实现一些js+css 或者canvas类型的游行.现在开 ...

  5. 【bzoj4152】[AMPPZ2014]The Captain 堆优化Dijkstra

    题目描述 给定平面上的n个点,定义(x1,y1)到(x2,y2)的费用为min(|x1-x2|,|y1-y2|),求从1号点走到n号点的最小费用. 输入 第一行包含一个正整数n(2<=n< ...

  6. 【MySQL】数据库 --MySQL的安装

    本篇教程主要讲解在CentOS 6.5下编译安装MySQL 5.6.14! 1.卸载旧版本: 使用下面的命令检测是否安装有MySQL server <span style="font- ...

  7. NAS星云链 入门之从零开发第一个DAPP

    应该有很多小伙伴和我一样,一直想去入手学习区块链,但是总无从下手,有些概念感觉理解了,有感觉没理解.其实这都是“没实践”的锅. 所谓看十遍不如想一遍,想一遍不如做一遍.这不最近星云链nebulas正有 ...

  8. 【可持久化线段树？！】rope史上最全详解

    https://www.luogu.org/problemnew/show/P3919 看到上面链接中的题时,我在学会可持久化线段树的同时,第一次学会了一个非常屌(cai)的STL大法——rope!! ...

  9. Educational Codeforces Round 54 (Rated for Div. 2) ABCD

    A. Minimizing the String time limit per test 1 second memory limit per test 256 megabytes Descriptio ...

  10. JAVA多线程---好的博客资源收集

    个人笔记,备忘 1.http://blog.csdn.net/column/details/concurrency.html    兰亭风雨的专栏 2.http://lavasoft.blog.51c ...