【学习笔记】CSS深入理解之line-height

Stardustsky 发布于2019-08-30 15:54 / 464人阅读

摘要：内联盒子的高度由决定，限制包含盒子的高度，两者一致，即把内联盒子安放在包含盒子内，排除其他外界干扰。这时候由内联盒子模型可知，行间距是等分的，中间部分是，达到看似居中的效果。可以得到结论和设置一致，并非是完全垂直，除非为。

张鑫旭的CSS深入理解之line-height学习笔记

line-height的定义

行高：两行文字基线之间的距离

为何是基线：基线是定义所有字线的根本

不同字体和基线的距离不同，在字格中放置的样式不同

行内框盒模型

内容区域（content area）

内联盒子|行内框（inline boxes）

行框盒子|行宽（line boxes）

包含盒子（containing box）

内联盒子模型

行高决定内联盒子高度

内容区域高度只与字号和字体有关，和行高无关

行间距（vertical padding）= 行高 - 内容区域

行框高度是行内最高内联盒子到最低内联盒子的距离

line-height属性值

normal: 和浏览器以及元素字体相关

数值：1.5，根据当前元素的font-size计算

百分比：150%，根据当前元素的font-size计算

具体长度：1.5em, px, rem

inherit：input的默认行高为normal，使用inherit可更改为上下统一

1.5, 1.5em, 150%的差别

1.5 - 继承line-height，元素根据自身的font-size计算

1.5em, 150% - 设置line-height的元素计算好具体值再向下传递该值

line-height与图片

隐匿文本节点产生一个不可见的行内框，图片默认对齐基线，导致图片并非贴紧容器底边
https://codepen.io/curlywater...

line-height和height设置一致

对单行行内元素的垂直居中，有一种惯用的方法，设置line-height和height一致。
内联盒子的高度由line-height决定，height限制包含盒子的高度，两者一致，即把内联盒子安放在包含盒子内，排除其他外界干扰。
这时候由内联盒子模型可知，行间距是等分的，中间部分是content area，达到看似居中的效果。

但其实这个时候，并不是完全居中；
https://codepen.io/curlywater...
上面的例子里，增加字体大小，发现inline-block的盒子不再居中；
结合vertical-align来说明，vertical-align:middle其实是根据x字符的中心线居中，由于字符有下沉的特性，导致这条中心线并不与容器中心线重合。
内联盒子模型中，content-area的高度受font-size影响，font-size变大，content-area的空间变大，基线的位置向下，x的位置也向下偏移，两条中心线之间的差距也就越大。

可以得到结论：line-height和height设置一致，并非是完全垂直，除非font-size为0。

云服务器服务器托管深入理解webrtc之aec 如何深入理解深度学习深入理解系列深入理解linux

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

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

【学习笔记】CSS深入理解之vertical-align

摘要：上例中，左边盒子的基线为其底边缘，右边盒子的基线为的基线将右边盒子的行高设置为，即这个的高度为，位置处于中间。 vertical-align的值线类：baseline（默认）, top, bottom, middle 文字类：text-top, text-bottom 上标下标类：sub, super 数值：1px, 1em - 在baseline对齐的基础上上下偏移一定数值百分...

ermaoL 2019-08-30 15:54 评论0 收藏0
【前端Talkking】CSS系列——CSS深入理解之line-height

摘要：按照定义来解释，就是两行文字之间基线之间的距离。了解完基线的定义后，我们接着来聊行高。上面我们说过，行高就是两条基线的之间的距离，如下图所示。 1.写在前面两个多周的时间没有写文章了，手好痒好痒，趁着公司在装修，从上周末到本周都在家办公，同时公司的项目并不紧急，于是抽着时间梳理了一下CSS中关于行高line-height的理解，今天发布出来，大家准备好了吗？ 2.基本概念 2.1行高...

peixn 2019-08-29 15:40 评论0 收藏0
【前端Talkking】CSS系列——CSS深入理解之line-height

摘要：按照定义来解释，就是两行文字之间基线之间的距离。了解完基线的定义后，我们接着来聊行高。上面我们说过，行高就是两条基线的之间的距离，如下图所示。 1.写在前面两个多周的时间没有写文章了，手好痒好痒，趁着公司在装修，从上周末到本周都在家办公，同时公司的项目并不紧急，于是抽着时间梳理了一下CSS中关于行高line-height的理解，今天发布出来，大家准备好了吗？ 2.基本概念 2.1行高...

CoXie 2019-08-05 14:06 评论0 收藏0
[学习笔记] css中的line-height

摘要：基本概念行高行距行高是指文本行基线间的垂直距离。行框行框是指本行的一个虚拟的矩形框，由该行中行内框组成。行框也是浏览器渲染模式中的一个概念，无法显示出来。行框高度等于本行中所有行内框高度的最大值。设置合理的行间距。设置固定的行间距。又已经快十天没有写文章了，一周一篇其实好艰难的说……本来想接着上篇事件（上篇）总结事件类型的，可是看完之后整理下还是有点乱，就一直拖着没写……实在是不能再...

frolc 2019-08-28 18:13 评论0 收藏0
【学习笔记】CSS深入理解之float

摘要：为了实现文字环绕效果，规范规定的措施是使父容器塌陷，元素脱离文档流浮动，元素周围的内容转换为围绕元素排列。从浮动的起因和浮动的实现后果来看，浮动不适合用于大范围的布局，更适合利用其特性实现一些小范围的流体布局效果。张鑫旭的CSS深入理解之float浮动学习笔记 float的历史 float为产生文字环绕效果而生 float的特性 — 包裹和破坏包裹：即产生一个BFC破坏：使父容器...

denson 2019-08-29 17:31 评论0 收藏0