深入理解CSS中的line-height的使用

  发布时间:2019-08-12 15:48:07   作者:阳光。   我要评论

这篇文章主要介绍了深入理解CSS中的line-height的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

什么是line-height(行高)?

line-height 是指两行文字基线之间的距离。

什么是基线?

基线、底线、顶线、中线

 

注意:

  • 基线(base line)并不是汉字文字的下端沿,而是英文字母“x”的下端沿。
  • 不同字体的基线不尽相同。

行距、行高

 

line-height 与行内框盒子模型

所有内联元素的样式表现都与行内框盒子模型有关。例如浮动的图文环绕效果... and so on

什么是行内框盒子模型

我们通过下面这段代码进行讲解

<p>这是一行普通的文字,这里有个<em>em</em>标签</p>

在这段代码中包含了 4 中盒子:

content area 内容区是指底线和顶线包裹的区域(行内元素 display:inline 可以通过 background-color 属性显示出来),实际中不一定看得到,但确实存在。内容区的大小依据 font-size 的值和字数进行变化。

inline boxes 。内联盒子不会让内容成块排列,而是排成一行。如果外部 inline 水平的标签( spanaem 等)则属于 内联盒子 ,如果是光秃秃的文字则属于 匿名内联盒子

line boxes 。每一行就是一个 行框盒子 。每个行框盒子又是由一个个 内联盒子 组成。

containing box 包含盒子。 包含盒子 是由一行一行的 行框盒子 组成。 <p> 标签就代表了一个 包含盒子 。(即上图中的绿色部分)

line-height 的高度机理

深入理解内联元素的高度表现

在讲解原理之前,我们先看以下代码:

<p>这是一行普通的文字,这里有个<em>em</em>标签</p>
console.log(document.querySelector('p').clientHeight); // 输出36px

现在我们思考这样几个问题:

  • 元素的高度从何而来?
  • 是由里面的文字撑开的?

the answer is :元素的高度是由 line-height 决定的:

line-height 明明是两基线之间的距离,单行文字哪来行高,还控制了高度?

  • 行高由于其继承性,影响无处不在,即使单行文本也不例外。
  • 高度的表现不是行高,而是内容区域和行间距。
  • 内容区域高度+行间距=行高
  • 内容区域高度只与字号以及字体有关,与 line-height 没有任何关系。(在 simsun 字体下,内容区域高度等于 font-size )。换句话说,在 simsun 字体下: font-size+行间距=line-height
  • 行间距是上下均分的。

总结

  • 行高决定内联盒子高度;行间距是墙头草,可大可小(甚至负值),保证高度正好等于行高。
  • 多行文本的高度等于单行文本的高度累加。

 line-height 的各类属性值

normal

line-height:normal; 默认属性值,与浏览器相关,且与元素字体相关联。

 <number>

line-height:1.5; 使用数值作为行高,根据当前元素的 font-size 大小计算。

 <length>

line-height:1.5em;line-height:1.5rem;line-height:20px; 使用具体单位作为行高值。

 <percent>

line-height:150% 使用百分比作为行高值。相对于设置了该 line-height 属性的元素的 font-size 大小计算。

 inherit

input{line-height:inherit;} ,行高继承。使用 inherit 可以让文本框样式可控性更强。 行高默认具有继承性,为什么还是这样做??? 控件元素 的默认行高是 normal ,而不是继承父级元素的行高。

line-height:1.5line-height:1.5em;line-height:150% 的区别

在计算结果上是相同的,但是所影响的元素有区别。

  • line-height:1.5 所有可继承元素会根据 font-size 重新计算行高。(也就是说其子元素都会根据自身的 font-size * 1.5 计算行高,每个子元素都要进行一次计算。)
  • line-height:150%/1.5em ,当前元素根据 font-size 计算行高,继承给下面的元素。(当前元素根据 font-size 计算行高,然后将所计算的出来的值继承给后代,也就是说只需要当前元素进行计算,而子元素不需要重新计算。)

body 全局数值使用经验

如果是 blog ,已阅读为主的网页, line-height:1.5/1.6 较为适宜。

如果是面向用户,并不是阅读为主的网页,则推荐使用匹配 20 像素的使用经验。 body{font-size:14px;line-height:1.4286} 或者合并形式 body{font:14px/1.4286 'microsoft yahei'}

line-height 与图片高度表现。

line-height 不会影响图片的高度。

隐匿文本节点: <p> 标签是一个文本节点,其默认会有文本。即使 <p></p> ,也就是当内容为空时,也存在文本节点,只不过看不到而已。这样的节点称其为隐匿文本节点,也正因为隐匿文本节点的存在,才会造成下面图中的情形。

 

 

如何消除图片与底部之间的间隙?

在项目开发中,我们偶尔会遇到以下情形:

 

解决的办法主要有以下三种:

1.图片块状化。( vertical-align )只适用于 inline``inline-block 元素,也就是说对于 block 元素并没有基线对齐的说辞。 img{display:block;}

2.图片底线对齐 img{vertical-align:bottom;}

3.行高足够小,使基线上移。 .box{line-height:0}

line-height的实际应用

1.实现大小不固定的图片,多行文字的垂直居中

2.实现多行文本水平垂直居中

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 关于css中line-height(行高)设置无效的问题的解决方法

    这篇文章主要介绍了关于css中line-height(行高)设置无效的问题的解决方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-29
  • 深入理解CSS行高line-height与文本垂直居中的原理

    本文详细介绍了CSS行高属性line-height与文本垂直居中的原理,通过本文的介绍相信对大家以后使用line-height和设置文本垂直居中会更加熟练,有需要的可以参考借鉴。下面一
    2016-08-12
  • 浅谈css中vertical-align和line-height的用法

    下面小编就为大家带来一篇浅谈css中vertical-align和line-height的用法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,祝大家游戏愉快
    2016-07-27
  • 全面了解css行高line-height的用法

    下面小编就为大家带来一篇全面了解css行高line-height的用法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-25
  • CSS中的line-height行高属性学习教程

    line-height对于页面中字体的行距等排版方面的效果至关重要,这里为大家整理了CSS中的line-height行高属性学习教程,包括line-height的各种取值设定等方面,需要的朋友可以参
    2016-06-06
  • CSS中的line-height行高属性的使用技巧小结

    这篇文章主要介绍了CSS中的line-height属性的使用技巧,文中同时给出了line-height使用中经常出现的文字重叠问题的解决方法,需要的朋友可以参考下
    2016-02-02
  • CSS中行高line-height属性的一些使用技巧

    这篇文章主要介绍了CSS中行高line-height属性的一些使用技巧,包括为每行文本指定不同颜色和文本中间添加线时用到的一些操作方法,需要的朋友可以参考下
    2015-08-21
  • CSS属性探秘系列(三):line-height

    本文从line-height的定义、line-height的理解、line-height的应用3个方面详细为大家介绍了line-height,非常的详细,有需要的朋友可以参考下
    2014-10-22
  • css中height和line-height区别

    这篇文章主要介绍了css中height和line-height区别,需要的朋友可以参考下
    2014-08-02
  • css line-height属性的使用技巧

    本文介绍下,css中的line-height属性的用法,通过实例学习css line-height属性的具体用法,感兴趣的朋友参考下
    2014-08-02

最新评论