资讯专栏INFORMATION COLUMN

【前端Talkking】CSS系列——CSS深入理解之line-height

peixn / 1937人阅读

摘要:按照定义来解释,就是两行文字之间基线之间的距离。了解完基线的定义后,我们接着来聊行高。上面我们说过,行高就是两条基线的之间的距离,如下图所示。

1.写在前面

两个多周的时间没有写文章了,手好痒好痒,趁着公司在装修,从上周末到本周都在家办公,同时公司的项目并不紧急,于是抽着时间梳理了一下CSS中关于行高line-height的理解,今天发布出来,大家准备好了吗?

2.基本概念 2.1行高的定义与图解

行高,顾名思义指的就是一行文字的高度。按照定义来解释,就是两行文字之间基线之间的距离。那么问题来了,什么是基线呢?大家回想下我们刚开始学习汉语拼音的时候,使用四线格本子的四条线,其中倒数第二条线就是基线,如果你说,抱歉,我已经全部还给老师了,没有任何印象。呵呵,别急呢,我已经给大家准备好了,请看下面的这副图,其中,a、c、e、x、z等字母的底边线(倒数第二根线)就是我们说的基线。

了解完基线的定义后,我们接着来聊行高line-height。上面我们说过,行高就是两条基线的之间的距离,如下图所示。

大家是不是已经

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/113468.html

相关文章

  • 前端TalkkingCSS系列——CSS深入理解relative定位

    摘要:前言在前面的两篇文章深入理解之浮动和深入理解之定位中,介绍了和的特性和使用方法,如果大家仔细阅读完了这两篇文章,相信你的打怪技能又提高的一大截,那么趁着自己最近状态不错,就多给大家分享点自己平时所学的技能。 1.前言 在前面的两篇文章:CSS深入理解之float浮动和CSS深入理解之absolute定位中,介绍了float和absolute的特性和使用方法,如果大家仔细阅读完了这两篇文...

    魏宪会 评论0 收藏0
  • 前端TalkkingCSS系列——CSS深入理解float浮动

    摘要:包裹性所谓包裹性,其实是由包裹和自适应两部分组成。官方对属性的解释是元素盒子的边不能和前面的浮动元素相邻。清除高度塌陷的问题在上面的章节中,如果子元素设置浮动属性,则父元素就会出现高度塌陷的问题。 float属性是CSS中常用的一个属性,在实际工作中使用的非常多,如果使用不当就会出现意料之外的效果。虽然很多人说浮动会用就行、浮动过时了,但是对于优秀的前端开发人员,需要有刨根问底的精神,...

    yankeys 评论0 收藏0
  • 前端TalkkingCSS系列-css3box-shadow介绍

    摘要:基本上就是将单侧投影中的技巧运用两次,以如下所示在浏览器中的效果如下模拟边框使用属性可以模拟的效果,以如下所示在浏览器中的效果如下我们可以看到利用属性模拟了的效果,但是与不同的是,使用创建的边框效果并不会影响元素的尺寸。 1.写在前面 在CSS3中,可以使用box-shadow属性来创建阴影效果来给二维平面增加深度效果,这个属性在前端开发中使用的非常多,例如segmentfault的首...

    jackzou 评论0 收藏0
  • 前端TalkkingCSS系列-红月亮、蓝月亮、X月亮,还是渐变月亮好

    摘要:写在前面这两天,大家一定是被红月亮刷屏了吧我们都被下面漂亮的月亮迷倒了吧哈哈,大家清醒清醒,那么漂亮的月亮,大家有没有想过我们的可以搞定任意颜色的月亮呢答案是肯定可以的。 1.写在前面 这两天,大家一定是被红月亮刷屏了吧?我们都被下面漂亮的月亮迷倒了吧?showImg(https://segmentfault.com/img/bV21NB?w=102&h=101); 哈哈,大家清醒清醒...

    JinB 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<