深入理解line-height

chemzqm 发布于2019-08-30 13:04 / 1012人阅读

摘要：初学者也许会对这句话嗤之以鼻，但随着我学习的深入，渐渐意识这句话还是有一定道理的。然而，我们真的了解它吗又是由什么来决定的首先推荐一篇文章，深入了解的行高属性假设你已经读完了这篇文章并且已经大致理解那么这张图应该能看懂了。

HTML和CSS因为其所见即所得的直观特性，往往被冠上简单易学的名号。我一开始也是这么想的，不就是那几个控制浮动、颜色、位置的标签吗！CSS3不就是加了些花哨的特效吗！
记得哪位大大说过，前端开发里CSS是最难的。初学者也许会对这句话嗤之以鼻，但随着我学习的深入，渐渐意识这句话还是有一定道理的。用三体里的一句话就是

方寸之间，深不见底啊

每一个简单的属性，都有你所不知的一面！今天就来说说这个line-height。我们在文章的排版中，经常用到line-height这个属性。然而，我们真的了解它吗？line-height又是由什么来决定的？
首先推荐一篇文章，深入了解css的行高Line Height属性
(假设你已经读完了这篇文章并且已经大致理解)

那么这张图应该能看懂了。这个两行的文字所包含的盒子，从里到外分别为：

content area(绿色字体所在的白色背景区域，边框为绿色)

inline-boxes(content area加上其上下的黄色区域(半行间距),边框也为绿色)

line-boxes(包裹在inline-boxes外部的盒子，边框为红色)

containing box(最外面的盒子，边框为蓝色)

其中line-boxes的高度取决于其包含的inline-boxes中最高的那一个，例如本图片中的斜体fish。

图中的黄色部分分布在content area的上下，这就是半行间距。譬如我们设置

p{font-size:16px;line-height:20px;}

那么黄色部分(半行间距)就是(20-16)/2=2px，上一行和下一行的半行间距叠加为4px，再加上字体本身的16px，那行距就自然是20px了(严格来说，行距是上下两行文字之间baseline的距离)

(未完)

参考资料
css行高line-height的一些深入理解及应用

云服务器 GPU云服务器深入理解系列深入理解linux 深入理解webrtc 深入理解python

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

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

深入理解line-height

摘要：初学者也许会对这句话嗤之以鼻，但随着我学习的深入，渐渐意识这句话还是有一定道理的。然而，我们真的了解它吗又是由什么来决定的首先推荐一篇文章，深入了解的行高属性假设你已经读完了这篇文章并且已经大致理解那么这张图应该能看懂了。 HTML和CSS因为其所见即所得的直观特性，往往被冠上简单易学的名号。我一开始也是这么想的，不就是那几个控制浮动、颜色、位置的标签吗！CSS3不就是加了些花哨的特效...

Java3y 2019-08-02 15:55 评论0 收藏0
【学习笔记】CSS深入理解之line-height

摘要：内联盒子的高度由决定，限制包含盒子的高度，两者一致，即把内联盒子安放在包含盒子内，排除其他外界干扰。这时候由内联盒子模型可知，行间距是等分的，中间部分是，达到看似居中的效果。可以得到结论和设置一致，并非是完全垂直，除非为。张鑫旭的CSS深入理解之line-height学习笔记 line-height的定义行高：两行文字基线之间的距离为何是基线：基线是定义所有字线的根本不同字体...

Stardustsky 2019-08-30 15:54 评论0 收藏0
CSS魔法堂：深入理解line-height和vertical-align

摘要：下的属性值详解以下内容均在中测试默认对齐方式这里作为参考系，而它的就是所要对齐的了。没有任何变化。那改变又如何呢为了让的清晰可见，特意添加一个的包裹着。前言一直听说line-height是指两行文本的基线间的距离，然后又说行高等于行距，最近还听说有个叫行间距的家伙，@张鑫旭还说line-height和vertical-align基情四射，贵圈真乱啊。。。。。。于是通过本篇来一探究竟...

avwu 2019-08-30 12:52 评论0 收藏0
深入理解css之vertical-align

摘要：但实质上，只要是内联元素，这两个元素都会同时在起作用。而解决方案可以有以下几种元素不使用基线对齐，可以改为对齐元素块状化设置为设置为总结讲解了的各类属性值及其效果起作用的前提是内联元素与都是同时作用在内联元素上的前言 vertical-align用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。也就是说，对于块级元素，vertical-align...

cgh1999520 2019-08-30 15:53 评论0 收藏0
深入理解css之line-height

摘要：的应用大部分时候，我们设置，都是为了垂直居中对齐。然后我们给设置，这样我们就可以重置设置的，又因为保持了内联特性，因此我们可以设置以及产生，从而实现近似垂直居中对齐。前言行高，顾名思义是一行文字的高度，而从规范上来说则是两行文字基线之间的距离。行高是作用在每一个行框盒子(line-box)上的，而行框盒子则是由内联盒子组成，因此，行高与内联元素可以说是非常紧密，行高直接决定了内联元...

miya 2019-08-29 15:25 评论0 收藏0