目录
基本概念
行高、行距
4种box
取值
继承
参考
首页 web前端 html教程 [学习笔记] css中的line-height_html/css_WEB-ITnose

[学习笔记] css中的line-height_html/css_WEB-ITnose

Jun 24, 2016 am 11:39 AM

又已经快十天没有写文章了,一周一篇其实好艰难的说……本来想接着上篇事件(上篇)总结事件类型的,可是看完之后整理下还是有点乱,就一直拖着没写……实在是不能再拖下去了,今天就简单说说CSS中我们常用但又不一定真正了解的line-height属性。

基本概念

行高、行距

行高是指文本行基线间的垂直距离。那什么是基线呢?记不记得vertical-align属性有个baseline值,这个baseline就是基线。看张“盗图”(选自下面的参考文章),其实我也修改了一下啦~


注意:倒数第二根是基线哦,最下面那根是底线,不是基线。

图中两条红线之间的距离就是行高(line-height),上一行的底线和下一行的顶线之间的距离就是行距,而同一行顶线和底线之间的距离是font-size的大小,行距的一半是半行距,半行距、font-size、line-height之间的关系看图片的右下角就一目了然了~

半行距 = (line-height - font-size)/2
登录后复制

当然,半行距也可能为负值(当line-height

4种box

要说的4种盒子分别是inline box、line box、content area、containing box ~

  • inline box (行内框)
    每个行内元素会生成一个行内框,行内框是一个浏览器渲染模型中的一个概念,无法显示出来,行内框的高度等于font-size,设定line-height时,行内框的高度不变,改变的是行距

  • line box (行框)
    行框是指本行的一个虚拟的矩形框,由该行中行内框组成。行框也是浏览器渲染模式中的一个概念,无法显示出来。行框高度等于本行中所有行内框高度的最大值。当有多行内容时,每一行都有自己的行框。

  • content area (内容区)
    内容区是围绕着文字的一种box,无法显示出来,其高度取决于font-size和padding。个人觉得:内容区的高度 = font-size + padding-top + padding-bottom,有待查证,也期待小伙伴们给出答案~

  • containing box
    containing box 是包裹着上述三种box的box,有点绕哈~看图

原谅我画图水平有限,不过仔细辨认还是能看出来的~ ^_^

取值

一般情况下,浏览器默认的line-height为1.2。可以自定义 line-height 覆盖这个初始值,那么该怎样设置line-height呢?有以下5种方式:

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

看起来如此简单~但是,line-height是个可继承属性,它的继承规则有那么一点点复杂……

继承

需要提前说明的是:line-height的大小与font-size息息相关,除了指定line-height为多少px,剩下的设置方式都是基于font-size算出来的
下面逐个讲一讲~

  • inherit
    这个其实没什么说的,继承父元素line-height的值,所以父元素的是多少就是多少。
    如果其后代元素不设置line-height 的话,也会是这个值。

  • length
    假设设置 line-height 为20px,那么该行的该行的行高就是20px,与 font-size 无关,不会随着 font-size 做相应比例的缩放。
    这个长度值(20px)会被后代元素继承,所有的后代元素会使用这个相同的、继承的 line-height (20px),除非后代元素设定 line-height 。

  • 百分比
    假设自身的 font-size 为16px,line-height 设为120%。那么其行高为:16 * 120% = 19.2px。即 line-height 是根据自身的 font-size 计算出来的。
    子元素会继承父元素的line-height,那么它继承的是什么呢,百分比(120%)?还是19.2px?
    答案是后者,19.2px,即父元素line-height计算后的最终值。

  • normal
    line-height 设置为 normal 的时候,行高取决于浏览器的解析,一般是1.2。
    与前面不同的是,line-height 设置为 normal 的元素,其子元素不再继承其line-height计算后的最终值,而是根据子元素自身的 font-size 进行计算。见下表~

    element font-size line-height 计算后的lline-height
    body 16px normal 16px * 1.2 = 19.2px
    h1 32px normal 32px * 1.2 = 38.4px

    可见,子元素随着自身 font-size 的大小而做相应比例的缩放。

  • 纯数字
    如果既想要 normal 的灵活,又想设置一个自定义的值,那就要用纯数字啦~
    纯数字方式与 normal 唯一的不同,就是数值的大小,纯数字可以自己随意设定,而 normal 的值是浏览器决定的。

    element font-size line-height 计算后的lline-height
    body 16px 1.5 16px * 1.5 = 24px
    h1 32px 1.5 32px * 1.5 = 48px

    其后代元素会继承这个数值(比如 1.5),然后根据自身的 font-size 算出自身的line-height。

总结如下:

设置方式 line-height 计算后的line-height 子元素继承的line-height
inherit 父元素的line-height值 不用计算 父元素的line-height值
length 20px 不用计算 20px
% 120% 自身font-size (16px) * 120% = 19.2px 继承父元素计算后的line-height值 19.2px,而不是120%
normal 1.2 自身font-size (16px) * 1.2 = 19.2px 继承1.2,line-height = 自身font-size(32px) * 1.2 = 38.4px
纯数字 1.5 自身font-size (16px) * 1.2 = 19.2px 继承1.5,line-height = 自身font-size(32px) * 1.5 = 48px

那么,哪一种是最好的方式呢?
一般来数,设置行高的值为 纯数字 是最推荐的方式,因为其会随着对应的 font-size 而缩放。

这是对line-height的一点总结,欢迎小伙伴们拍砖哈~

参考

MDN line-height
深入了解css的行高Line Height属性
CSS行高??line-height

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

> gt;的目的是什么 元素? > gt;的目的是什么 元素? Mar 21, 2025 pm 12:34 PM

本文讨论了HTML< Progress>元素,其目的,样式和与< meter>元素。主要重点是使用< progress>为了完成任务和LT;仪表>对于stati

< datalist>的目的是什么。 元素? < datalist>的目的是什么。 元素? Mar 21, 2025 pm 12:33 PM

本文讨论了html< datalist>元素,通过提供自动完整建议,改善用户体验并减少错误来增强表格。Character计数:159

HTML5中跨浏览器兼容性的最佳实践是什么? HTML5中跨浏览器兼容性的最佳实践是什么? Mar 17, 2025 pm 12:20 PM

文章讨论了确保HTML5跨浏览器兼容性的最佳实践,重点是特征检测,进行性增强和测试方法。

< meter>的目的是什么。 元素? < meter>的目的是什么。 元素? Mar 21, 2025 pm 12:35 PM

本文讨论了HTML< meter>元素,用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了< meter>从< progress>和前

如何使用HTML5表单验证属性来验证用户输入? 如何使用HTML5表单验证属性来验证用户输入? Mar 17, 2025 pm 12:27 PM

本文讨论了使用HTML5表单验证属性,例如必需的,图案,最小,最大和长度限制,以直接在浏览器中验证用户输入。

视口元标签是什么?为什么对响应式设计很重要? 视口元标签是什么?为什么对响应式设计很重要? Mar 20, 2025 pm 05:56 PM

本文讨论了视口元标签,这对于移动设备上的响应式Web设计至关重要。它解释了如何正确使用确保最佳的内容缩放和用户交互,而滥用可能会导致设计和可访问性问题。

< iframe>的目的是什么。 标签?使用时的安全考虑是什么? < iframe>的目的是什么。 标签?使用时的安全考虑是什么? Mar 20, 2025 pm 06:05 PM

本文讨论了< iframe>将外部内容嵌入网页,其常见用途,安全风险以及诸如对象标签和API等替代方案的目的。

Gitee Pages静态网站部署失败:单个文件404错误如何排查和解决? Gitee Pages静态网站部署失败:单个文件404错误如何排查和解决? Apr 04, 2025 pm 11:54 PM

GiteePages静态网站部署失败:404错误排查与解决在使用Gitee...

See all articles