与其焦虑被 AI 取代或猜测前端是否已死, 不如看看 vertical-align 扎实你的基础!!!

news2024/11/13 18:26:51

与其焦虑被 AI 取代或猜测前端是否已死, 不如看看 vertical-align 扎实你的基础!!!

vertical-align 设置 display 值为 inline, inline-blocktable-cell 的元素竖直对齐方式.

line-height: normal 究竟是多高说起

我们先来看一段代码, 分析一下为什么第二行的行高, 也就是 line-height 比第一行和第三行还要高?

<p class="border-dash-black max-w-12em text-40 Helvetica">
  Hello, where are you from?
  <span class="border-dash-orange Helvetica">xHelp</span>
  <span class="border-dash-orange PingFang">xHelp</span>
  <span class="border-dash-orange Times-New-Roman">xHelp</span>
  I am from China.
</p>

在这里插入图片描述

要知道 line-height 就一定要先了解行盒子(line box), 因为 line-height 的定义就是行盒子的高度.

以上面的 <p> 标签为例, 在英文从左到右的书写顺序下, 每一个内联标签和不在内联标签中的文字都是从左到右排列的. 由于宽度限制, 一行不能容下更多文字的情况下就会另起一行排列. 上图中一共有 3 行, 每一行其实就是一个看不见行盒子. 行盒子就是要容下这一行中所有的元素.

我们知道, line-height 这个属性的值默认是 normal, 也就是说 <p>line-height 值为 normal, 按理说每个行盒子的高度应该是一样的才对, 但是为什么第二行的行盒子就是比第一行和第三行的高呢? 原因出在 normal 这个值究竟是多少?

实际上, CSS 规范中并没有指定 normal 的值究竟是多少, 不同的字体在设计时的 normal 值差别很大. 有人做过统计, Google Fonts1000+ 的字体的 line-heightnormal 计算值从 0.9+3.3+

很多专业术语

在深挖 normal 之前, 我们需要认识一些在字体设计领域的专业术语, 实际上其中大部分我们在 CSS 的世界中也常常听到.

在这里插入图片描述

  • baseline: 小写字母 x 的下边界
  • x-height: 小写字母 x 的高度, CSS 中有一个专门表示这个高度的单位 ex
  • cap height: 大写字母的高度. capCapital 的前三个字母, Capital 本身就有大写字母的意思
  • ascender: 一些字母从 baseline 到高过 x-height 并且通常高过 cap height 的部分, 比如小写字母 b 的竖直笔画
  • descender: 在 baseline 下面的部分, 比如 g 或者 p 的下半部分.
  • UPM(Unit Per Em): 首先 emCSS 中表示一个字体大小的长度单位. UPM 的意思是在一个 em 的长度内逻辑单元的个数. 为什么是逻辑单元呢?
    • 在活字印刷技术当中, 传统的字体是刻在一个一个的方块上, 这个方块的高度是统一的, 通常与大写字母 M宽度相同. 这样做是为了让这个字母的比例是正方形的(因此命名为 em square
    • 在字体设计领域, 不同类型的字体文件对 UPM 的定义也不相同. 比如 OpenType 字体的 UPM 通常为 1000. 而 TrueType 字体的 UPM 通常为 2 的整数次幂, 比如 10242048.
    • 所以如果 H 字母在 OpenType 字体设计时如果高度为 700, 那么 H 在以 10pxfont-size 展示到浏览器页面时, 其高度就是 7px.
  • ascend: baselineascender 的高度
  • descend: baselinedescender 的高度

实践出真知

有了上面的基础知识后, 我们就可以动手亲自看看 normal 的值究竟是多少了. 首先下载 fontforge 这款开源的字体设计软件, 然后下载 JetBrainsMono-Bold.ttf 这款开源字体文件.

在这里插入图片描述

可以看到 UPM1000. 并且 AscendDescend 分别是 1020-300. 当然截图中有两个上高和下深, 但我使用的是 macOS, 所以选择了 HHead 上高和 HHead 下深.

如果我们在 CSS 中使用这款字体, 看看其高度是多少?

在这里插入图片描述

好奇 21.5 的高度是怎么计算的吗? 其实有了上面数据, 我们就可以计算在 font-size 默认 16px 大小的前提下, 字体的高度了, 公式很简单. 最后值为 21.12

在这里插入图片描述

最后算出来的高度就是 21.5. 在我几周前构思这篇文章的时候计算值还是 21. 有可能是因为我更新了浏览器, 也有可能是浏览器在渲染字体的计算方式远比我这里列出的公式复杂.
在这里插入图片描述

在这里插入图片描述

不论什么原因, 我们都知道了字体的 line-heightnormal 值是怎么大概计算出来的了. 我们也可以回答为什么第二行比第一行和第三行还要高了, 就是因为第二行中的 PingFang 字体在设计时的 normal 行高就比 Helvetica 的行高要高. 由于行盒子要容纳一行中所有元素, 所以相应的就变高了.

行距

下面就出现了新的问题, 既然第二行的行高最高并且是由 PingFang 字体撑起来, 那么其他字体呢? HelveticaTimes New Roman 如何处理高出来部分呢? 于是引入了行距的概念

如果我们用鼠标选中第二行出现蓝色背景, 你就会发现 HelveticaTimes New Roman 的橘色边框的区域处于蓝色背景垂直居中的位置. 达到这样效果就是把高出的部分一分为二, 上面放一份下面放一份. 这也就是行距.
在这里插入图片描述
行距翻译自英文 leading, 其中 lead 的意思是铅. 在印刷时为了增加两行文字之间的距离就会在行与行之间加上铅条. 但是注意区分行距是两行文字 baseline 之间的距离, 行高是文字高度加上行距.

进入正题

vertical-align 字如其名, 就是垂直方向的对齐. 但是这个属性只对 displayinline, inline-blocktable-cell 的元素有效, 这里我们不讨论 table-cell 😅

vertical-align 的默认值就是 baseline, 也就是把子元素的 baseline 与父元素的 baseline 对齐. 我们先看一个面试题, 为什么图片的下面有一条空隙?

从一道面试题开始

<p class="border-dash-black">
  <img src="../../s.jpg" width="200px" alt="">
</p>

在这里插入图片描述

要回答这个问题需要有两个知识点

  1. <img> 元素本身没有 baseline, 又因为 vertical-align 的默认值是 baseline, 所以图片的下边缘刚好在父元素的 baseline.
  2. <p> 元素中压根没有一个字, 如何确定其 baseline 呢? 非也非也, 有东西, 只是看不见.
    • CSS 规范中提到, 如果一个块元素由内联元素构成, 那么 line-height 指定了这个块元素的最低高度. 最低高度由两部分构成, baseline 上方的高度和 baseline 下方的高度. 好像每一个行盒子都以一个宽度为 0inline 盒子开始, 这个 inline 盒子的 font-sizeline-height 继承父元素, 规范中将这个宽度为 0inline 盒子成为 strut, 其中文意思是支柱.
    • 有了 strut 即便块元素没有任何元素, 也可以确定块元素的 baseline.

有了上面两个概念, 解决这个问题就可以从两方面入手

  1. 出现空隙的本质是因为 line-height 不是 0, 我们直接把 line-height 改成 0 或者把 font-size 改成 0. (修改 font-size 也有效可以理解是因为 line-height 是相对于 font-size 计算的)
  2. 既然 vertical-align 的默认值是 baseline, 那有没有其他值, 使得图片下边缘刚好就在父元素的行盒子的下边缘呢?

你别说, 还真有, 就是 bottom.

vertical 的关键字属性

  1. 第一组: 与 line box 有关
    • top: 元素的 上边界line box上边界 对齐
    • bottom: 元素的 下边界line box下边界 对齐
  2. 第二组: 与 content area 有关
    • text-top: 元素的 上边界content area上边界 对齐
    • text-bottom: 元素的 下边界content area下边界 对齐
    • super: 元素的 baselinecontent areasup 元素的 baseline 对齐
    • sub: 元素的 baselinecontent areasub 元素的 baseline 对齐
    • middle: 元素的高度中心在父元素的 baseline 加上 x-height 一半的地方

我知道你有点晕, 先别晕, 虽然 <sup><sub> 不常见, 但是在数学和化学中常常用到的标签.

<p>
  <span>x<sup>2</sup>y</span>
  <span>H<sub>2</sub>O</span>
</p>

在这里插入图片描述

上面又出现了 content area 这个奇怪的新概念, 没关系, CSS 2.1 并没有定义 inline 元素的 content area 是什么, 在这里我们就简单理解成 content-box(📖注意下图中特别标注添加了 padding 的部分).

在这里插入图片描述

多一句, vertical-align 还支持数值类型和百分比类型的值, 其中百分比类型是相对于 line-height 计算的.

震惊! baseline 的移动

同样是 inline-block, 不同的内容竟然存在着 baseline 移动的情形, 希望平时没有注意的你这次一定要注意了.

<p class="border-dash-black">
  x
  <span class="border-dash-orange inline-block p-10">xHelp</span>
  <span class="border-dash-orange inline-block p-10 w-40 overflow-hidden">xHelpxHelp</span>
  <span class="border-dash-orange inline-block p-10 w-5 h-5"></span>
</p>

在这里插入图片描述

同样都是 display: inline-block 的元素, 但是看起来 baseline 却大有不同

  • 正常文字内容: baseline 就是文字的 baseline
  • 设置 overflow: hidden: baseline 是元素的下边界
  • 无内容: baseline 是元素的下边界

所以在遇到不同类型的对齐需求时的一定要注意.

参考

  1. https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align
  2. https://christopheraue.net/design/vertical-align#centering-an-icon
  3. https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
  4. https://www.w3.org/TR/CSS2/visudet.html#strut

谢谢你看到这里😊 还和我标题中说的一样, 我不知道未来是怎么样, 但我写这篇文章的时候焦虑有很多缓解, 因为我学到了很多知识, 最关键的是, 我行动了!!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/480502.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

D. Mysterious Crime(单个位置贡献)

Problem - D - Codeforces Acingel是一个小镇。这里只有一位医生——Miss Ada。她非常友善&#xff0c;没有人曾经对她说过坏话&#xff0c;所以谁能想到Ada会在她的房子里被发现死亡&#xff1f;世界著名侦探Gawry先生被任命查找罪犯。他询问Ada的邻居关于那个不幸的日子里拜访…

Java回收垃圾的基本过程与常用算法

目录 一、基本概述 二、垃圾分类 基本背景 举例说明各种引用类型的作用 强引用&#xff08;Strong Reference&#xff09; 软引用&#xff08;Soft Reference&#xff09; 弱引用&#xff08;Weak Reference&#xff09; 虚引用&#xff08;Phantom Reference&#xff…

广搜的优化技巧(备赛中)

A.电路维修 这道题我们对于每一个点都有四个方向&#xff0c;分别为 char op[]{"\\/\\/"}; 如果我们当前点到下一个点的方向不是对应的方向时我们的distance就加1&#xff0c;因为我们要求最优距离&#xff0c;所以我们采取一个小贪心的法则&#xff0c;每一次我们将…

「神州数码DCN」SAVI在IPV6环境下的应用

前言 介绍 ISIS&#xff0c;中间系统到中间系统的网络协议&#xff0c;最初是OSI组织为了他的CLNP&#xff08;类似于TCP/IP中的IP网络&#xff09;而设计的动态路由协议&#xff0c;后IETF对其进行修改和填充&#xff0c;现可以在TCP/IP和OSI环境中使用&#xff0c;称为&…

JavaWeb学习------jQuery

JavaWeb学习------jQuery jQuery函数库下载 jQuery函数库下载官网&#xff1a;Download jQuery | jQuery配套资料&#xff0c;免费下载 链接&#xff1a;https://pan.baidu.com/s/1aXBfItEYG4uM53u6PUEMTg 提取码&#xff1a;6c9i 然后下载&#xff1f; 来到官网&#xf…

Spark 1:Spark基础入门

Spark是什么 定义&#xff1a;Apache Spark是用于大规模数据&#xff08;large-scala data&#xff09;处理的统一&#xff08;unified&#xff09;分析引擎。 Spark 借鉴了 MapReduce 思想发展而来&#xff0c;保留了其分布式并行计算的优点并改进了其明显的缺陷。让中间数据存…

Winform从入门到精通(36)—ColorDialog(史上最全)

文章目录 前言一、属性1、AllowFullOpen2、AnyColor3、Color4、FullOpen5、ShowHelp6、SolidColorOnly7、Tag二、事件1、HelpRequest前言 当我们需要设置某个控件的颜色时,并且需要弹出一个可以选择颜色的对话框时,这时候就需要使用ColorDialog 一、属性 1、AllowFullOpen…

详解正则化

&#xff08;一&#xff09;正则化目的 防止过拟合现象&#xff0c;通过降低模型在训练集上的精度来提高其泛化能力&#xff0c;从而增加正则项 常见的降低过拟合方法 ■增加数据集的数据个数。数据量太小时&#xff0c;非常容易过拟合&#xff0c;因为 小数据集很容易精确拟…

Linux线程相关函数:线程的创建、回收、退出、取消

1. 线程号 进程号在系统中唯一&#xff0c;但线程号只在其所属进程环境中有效。 &#xff08;1&#xff09;pthread_self函数 #include<pthread.h>pthread_t pthread_self(void); /* 功能&#xff1a;获取线程号 返回值&#xff1a;调用此函数线程的ID */ pthread_se…

基于ssm的论坛系统的设计与实现【附源码】

基于ssm的论坛系统的设计与实现 摘 要 早期的网络论坛系统已经诞生一段时间&#xff0c;随着互联网技术的发展&#xff0c;它已经从最初的简单电子公告板系统变成了一种丰富的论坛系统社区模型。人们通过论坛系统进行信息的获取、发布和交流已经成为一种普遍的社交方式&#x…

一键开关机电路

一键开关机电路&#xff0c;通常用在防止关机导致数据保存发生错误&#xff0c;特别是在写EEPROM&#xff0c;FLASH和SD卡时&#xff0c;如果正在写入数据时断电&#xff0c;可能会导致数据保存错误&#xff0c;甚至导致元件损坏。一键开关机电路是由CPU来掌控&#xff0c;决定…

零基础带你认识HTML常用标签

目录 HTML 结构认识 HTML 标签HTML 文件基本结构标签层次结构快速生成代码框架 HTML 常见标签注释标签标题标签&#xff1a;h1 - h6水平线 hr 标签段落标签: p换行标签: br格式化标签图片标签: imgimg 标签的其他属性 超链接标签: a 表格标签基本使用和并单元格 列表标签表单标…

Compiler Lab1- 自制词法分析器

由于编译原理课的Lab1为自制词法分析器&#xff0c;所以笔者用C实现了一个极简的C语言词法分析器&#xff0c;用于分析C语言源代码。它可以处理关键字、标识符、整数、实数、浮点数的科学计数法表示、运算符、分隔符、字符串字面量、字符字面量、注释和预处理指令。请注意&…

【五一创作】力扣刷题实录(大厂用题)—— 1. 打家劫舍

1. 打家劫舍 某大厂 2022 年 9 月面试题挑战&#xff08;三&#xff09; 1.1 题目描述 力扣真题地址&#xff1a;https://leetcode.cn/problems/house-robber/?envTypestudy-plan-v2 你是一个专业的小偷&#xff0c;计划偷窃沿街的房屋。每间房内都藏有一定的现金&#xff0c;…

Photoshop如何使用路径与矢量工具之实例演示?

文章目录 0.引言1.制作名片2.利用钢笔工具抠出复杂图像3.制作App图标4.制作软件登录界面5.将图片切成九宫格 0.引言 因科研等多场景需要进行绘图处理&#xff0c;笔者对PS进行了学习&#xff0c;本文通过《Photoshop2021入门教程》及其配套素材结合网上相关资料进行学习笔记总结…

简单搭建node后台(笔记用)

毕设过程 mongodb 配置 使用node写后台一些语法运用bug关于安装一款群控软件后&#xff0c;修改了环境变量导致后台崩溃![](https://img-blog.csdnimg.cn/7c684b2e318048b3ad1db78484e10e6a.jpeg) vue管理后台 mongodb 配置 https://blog.csdn.net/weixin_43405300/article/de…

Unity API详解——Vector3类

Vector3类是用于表示三维向量的类&#xff0c;其中的x、y和z成员表示向量在三个轴上的分量。Vector3类还包含许多常用的函数&#xff0c;例如计算向量长度、向量点积和向量叉积等等。此外&#xff0c;Vector3类还具有许多方便的操作&#xff0c;例如规范化向量、向量加法、向量…

数据预处理--sort乱序DICOM文件

我们直接从PACS系统里拷贝下来的图像&#xff0c;很多情况下是乱序的&#xff0c;随机命名的。如下图 从这个文件夹名字&#xff0c;我们只知道患者的 ID 信息&#xff0c;不知道这个图像是什么模态&#xff08;CT/MRI/Xray&#xff09;&#xff0c;也不知道扫的是哪个部位&…

【电子学会】2023年03月图形化一级 -- 甲壳虫走迷宫

甲壳虫走迷宫 1. 准备工作 &#xff08;1&#xff09;绘制如图所示迷宫背景图&#xff0c;入口在左下角&#xff0c;出口在右上角&#xff0c;线段的颜色为黑色&#xff1b; &#xff08;2&#xff09;删除默认小猫角色&#xff0c;添加角色&#xff1a;Beetle&#xff1b; …

Python探索性P图,四种增强方式快速玩转pillow库

嗨害大家好鸭&#xff01;我是爱摸鱼的芝士❤ 我们平时使用一些图像处理软件时&#xff0c; 经常会看到其对图像的亮度、对比度、色度或者锐度进行调整。 你是不是觉得这种技术的底层实现很高大上&#xff1f; 其实最基础的实现原理&#xff0c; 用 Python 实现只需要几行…