基线、行高、行内框、行框、vertical-align等概念理解

2023-10-11 07:40

本文主要是介绍基线、行高、行内框、行框、vertical-align等概念理解,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

一、基本理论

1. 基线:一行字横排时下沿的基础线,基线并不是汉字的下端沿,而是英文字母x的下端沿。

2. 行高:文本行的基线间的距离

3. 行距:行高与字体尺寸的差称

4. 字体尺寸:font-size

5. 内容区域:一行中的每个元素都有一个内容区域,它是由字体尺寸决定的

6. 行内框:在没有其他因素影响的时候,行内框等于内容区域,而设定行高则可以增加或者减少行内框的高度。即:将行距的值(行高-字体尺寸)除以2,分别增加到内容区域的上下两边。

设置行高后,行高 === 行内框高???  不一定

高度大于行高的图片会把行框撑开。此时,虽然撑开了行框,却不会影响行高。

当行内含有图片的时候,图片和文字的垂直对齐方式默认是基线对齐,

如何计算行高,使得元素在指定区域内上下居中,间距适宜?   行距*2+font-size;当行高小于字体大小时将出现行距为负数的情况,也就是两行文字将部分重合。

行框:指本行的一个虚拟的矩形框,其高度等于本行内所有元素中行高最大的值





单行纯文本的垂直对齐:height = line-height

元素默认的垂直对齐方式为基线对齐

而像图片或者输入框这样的元素,本身没有基线,则将其底端同父元素的基线(行框的基线)对齐

二、案例解析

1. 为什么


<style>.box { height: 500px; background: red;}span{background:yellow;}img { height: 200px; width: auto; }
</style>
<div class="box"><img src="../xx.jpg"><span>XXX</span>
</div>
理解:图片的底部与该行的行框的基线(X的底部)对齐;当行内含有图片的时候,图片和文字的垂直对齐方式默认是基线对齐,

2. 为什么


在上述样式的基础上为box增加line-height: 500px;

解释:行框增加为500px,height=line-height使得XX文本在行内垂直居中,图片的底部与该行的行框的基线(X的底部)对齐。当行内含有图片的时候,图片和文字的垂直对齐方式默认是基线对齐,

3. 为什么


在上述2样式的基础上为图片增加vertical-align: middle;

解释:当行内含有图片的时候,图片和文字的垂直对齐方式默认是基线对齐。当我们设置了垂直对齐方式vertical-align: middle;后,图片不再遵循基线对齐,而是中间对齐。中间对齐(vertical-align : middle)通常使用在图片上,将图片的垂直方向的中线与文本行的中线对齐。

三、vertical-align:baseline | sub | super | top | text-top | middle | bottom | text-bottom | <百分比> | <长度> | inherit 

   说明: 设置元素内容的垂直对齐方式。 
   参数: 

  1.  baseline:使元素的基线同父元素的基线(行框的基线)对齐; 使元素的基线同基准元素(取行高最高的作为基准)的基线对齐 
  2. sub( super: 使元素的基线(替换元素的底 端)相对于父元素的基线升高,下标(vertical-align:sub)使元素的基线降低 
  3. top(bottom):是将元素的行内框的顶端(底端)与行框的顶端对齐
  4. text-top(text-bottom): 是将元素行内框的顶端(底端)同文本行的顶线对齐
  5. middle:通常使用在图片上,将图片的垂直方向的中线与文本行的中线对齐   
  6. 百分比和长度: CSS2,可为负数。 

 初始值:baseline 

继承性:不继承

参考文档:
http://www.jb51.net/css/29328.html
https://www.cnblogs.com/doctor-chen/p/6049374.html
http://www.zhangxinxu.com/wordpress/2009/11/css%E8%A1%8C%E9%AB%98line-height%E7%9A%84%E4%B8%80%E4%BA%9B%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3%E5%8F%8A%E5%BA%94%E7%94%A8/
https://blog.csdn.net/q121516340/article/details/51483439

这篇关于基线、行高、行内框、行框、vertical-align等概念理解的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/186557

相关文章

认识、理解、分类——acm之搜索

普通搜索方法有两种:1、广度优先搜索;2、深度优先搜索; 更多搜索方法: 3、双向广度优先搜索; 4、启发式搜索(包括A*算法等); 搜索通常会用到的知识点:状态压缩(位压缩,利用hash思想压缩)。

【生成模型系列(初级)】嵌入(Embedding)方程——自然语言处理的数学灵魂【通俗理解】

【通俗理解】嵌入(Embedding)方程——自然语言处理的数学灵魂 关键词提炼 #嵌入方程 #自然语言处理 #词向量 #机器学习 #神经网络 #向量空间模型 #Siri #Google翻译 #AlexNet 第一节:嵌入方程的类比与核心概念【尽可能通俗】 嵌入方程可以被看作是自然语言处理中的“翻译机”,它将文本中的单词或短语转换成计算机能够理解的数学形式,即向量。 正如翻译机将一种语言

【C++高阶】C++类型转换全攻略:深入理解并高效应用

📝个人主页🌹:Eternity._ ⏩收录专栏⏪:C++ “ 登神长阶 ” 🤡往期回顾🤡:C++ 智能指针 🌹🌹期待您的关注 🌹🌹 ❀C++的类型转换 📒1. C语言中的类型转换📚2. C++强制类型转换⛰️static_cast🌞reinterpret_cast⭐const_cast🍁dynamic_cast 📜3. C++强制类型转换的原因📝

【VUE】跨域问题的概念,以及解决方法。

目录 1.跨域概念 2.解决方法 2.1 配置网络请求代理 2.2 使用@CrossOrigin 注解 2.3 通过配置文件实现跨域 2.4 添加 CorsWebFilter 来解决跨域问题 1.跨域概念 跨域问题是由于浏览器实施了同源策略,该策略要求请求的域名、协议和端口必须与提供资源的服务相同。如果不相同,则需要服务器显式地允许这种跨域请求。一般在springbo

深入理解RxJava:响应式编程的现代方式

在当今的软件开发世界中,异步编程和事件驱动的架构变得越来越重要。RxJava,作为响应式编程(Reactive Programming)的一个流行库,为Java和Android开发者提供了一种强大的方式来处理异步任务和事件流。本文将深入探讨RxJava的核心概念、优势以及如何在实际项目中应用它。 文章目录 💯 什么是RxJava?💯 响应式编程的优势💯 RxJava的核心概念

如何通俗理解注意力机制?

1、注意力机制(Attention Mechanism)是机器学习和深度学习中一种模拟人类注意力的方法,用于提高模型在处理大量信息时的效率和效果。通俗地理解,它就像是在一堆信息中找到最重要的部分,把注意力集中在这些关键点上,从而更好地完成任务。以下是几个简单的比喻来帮助理解注意力机制: 2、寻找重点:想象一下,你在阅读一篇文章的时候,有些段落特别重要,你会特别注意这些段落,反复阅读,而对其他部分

深入理解数据库的 4NF:多值依赖与消除数据异常

在数据库设计中, "范式" 是一个常常被提到的重要概念。许多初学者在学习数据库设计时,经常听到第一范式(1NF)、第二范式(2NF)、第三范式(3NF)以及 BCNF(Boyce-Codd范式)。这些范式都旨在通过消除数据冗余和异常来优化数据库结构。然而,当我们谈到 4NF(第四范式)时,事情变得更加复杂。本文将带你深入了解 多值依赖 和 4NF,帮助你在数据库设计中消除更高级别的异常。 什么是

分布式系统的个人理解小结

分布式系统:分的微小服务,以小而独立的业务为单位,形成子系统。 然后分布式系统中需要有统一的调用,形成大的聚合服务。 同时,微服务群,需要有交流(通讯,注册中心,同步,异步),有管理(监控,调度)。 对外服务,需要有控制的对外开发,安全网关。

Java IO 操作——个人理解

之前一直Java的IO操作一知半解。今天看到一个便文章觉得很有道理( 原文章),记录一下。 首先,理解Java的IO操作到底操作的什么内容,过程又是怎么样子。          数据来源的操作: 来源有文件,网络数据。使用File类和Sockets等。这里操作的是数据本身,1,0结构。    File file = new File("path");   字

理解java虚拟机内存收集

学习《深入理解Java虚拟机》时个人的理解笔记 1、为什么要去了解垃圾收集和内存回收技术? 当需要排查各种内存溢出、内存泄漏问题时,当垃圾收集成为系统达到更高并发量的瓶颈时,我们就必须对这些“自动化”的技术实施必要的监控和调节。 2、“哲学三问”内存收集 what?when?how? 那些内存需要回收?什么时候回收?如何回收? 这是一个整体的问题,确定了什么状态的内存可以