css 行高

2023-10-31

1. 什么是行高,以及行高的概念

我们可以试想一下,为什么会要有行高。我现在不需要行高不是完全可以的嘛。

在这里插入图片描述
我们可以仔细看看这个,这不是很正常的嘛。
在这里插入图片描述
那我们来看看这个,那当我们第一次看到这个的时候你觉得是横着度,还是竖着读。合理的行高可以让我们阅读文章的时候更加的清晰。

那我们回归主题,那什么是行高, 其实可以把它理解为理解为一行文字所占据的高度。

注意这里面的一行,而不是某一个元素的高度。
在这里插入图片描述
也就是一行文本的基线到另一行文本的基线,这段距离就是行高。
在这里插入图片描述
此时有一个注意的是我们此时给一个元素设置高度,那这一行的元素的高度
就等于是这个行高。
在这里插入图片描述
![在这里插入图片描述](https://img-blog.csdnimg.cn/cf16191c9b594d4ea96d0a1de2ce8ab4.png

贴上代码,我觉得大家会更好的理解。此时我给div元素设置的行高是100px,大家可以看出来其实我没行的高度都是100px。那我们就证实了之前说的元素的行高就等于每一行的高度。

大家其实可以看出来,我每行的文字和下一行有着很大的距离,
那这些空白区域是什么呢。其实这些文字之间空白的区域就叫做间距。
好了,那我们知道哦这个其实就叫做间距,那这个间距是怎么计算出来的呢。

列如,我这段代码div元素文字是16px,那这个元素的每一行高度是多少,我上面说过这个元素的每一行高度其实就是行高。那我们设置的行高是100。
那我们就可以这样算。行高 - 字体的大小 (100 - 16 )= 84 。还剩84的高度那我们就的间距是有上间距,以及下间距的。就按照这个来进行平分就行了。

2. 行高的居中案例。

在这里插入图片描述
在这里插入图片描述
我们此时就一行文本,想让其居中。此时我们可以把他的行高给多少,没错,就是给200px。那么此时这行文本的高度就是200px,那我们此时的字体是16px 我还剩下184px 那么我们平分给到上间距,以及下间距 每个间距是
92px,上下间距是92px。那我们此时文字不就属于居中显示了吗。提一嘴,行高只对文本生效,因为只有文本才会有基线。

好了说完了,就是随手一记了,就当做是复习笔记了。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

css 行高 的相关文章

  • 无法正确显示行

    我应该在这个问题的开头说我完全没有 html css javascript 背景 所以请对我宽容点 如果我使用了错误的术语或者问了一个愚蠢的问题 没有提供足够的信息 请抱歉 我正在尝试让一个可扩展的表工作 通过阅读论坛线程 教程 将 nex
  • 每 2 行后使 html 表格的边框变厚

    我创建了一个包含一些内容的表 其中有 12 行和 2 列 我想显示边框 但每 4 行之后 我想将水平边框设置为比正常情况更粗 怎么做 请在这里帮忙 试试这个选择器 table tr nth of type 4n td border bott
  • 删除特定数据表上的所有边框

    我需要使用 PrimeFaces 隐藏一个数据表的所有边框 而不是全部 我尝试了很多事情 但没有人奏效 有谁知道该怎么做 我已将以下样式 单独 应用于ui datatable class border hidden important bo
  • 单击导航项锚链接时如何关闭切换菜单

    请看我的FIDDLE http jsfiddle net ayhpp8ax 我有一个带有 响应式 导航菜单 带有指向页面上元素的锚链接 的 1 页网站 当浏览器视口小于特定宽度 在我的情况下为 767px 时 使用此 javascript
  • 将鼠标悬停在原点时会触发translateY()

    当您将光标移动到按钮底部时 是否可以无限期地不触发动画 它看起来是这样的 gif https i stack imgur com QwdHW gif and codepen https codepen io jaeyson pen GwwJ
  • 如何在其他div id的悬停中使用div显示块

    如何打开div悬停时标记href tag 这是我在悬停 href 标签上显示 div 标签的代码 Services is id of href tag Services is id of div tag Service hover Serv
  • 导航栏下拉菜单(折叠)在 Bootstrap 5 中不起作用

    我在尝试使用以下命令创建响应式菜单或下拉按钮时遇到问题Bootstrap 5一切似乎都正常 导航图标和下拉图标出现 但它不起作用 当我单击nav图标或dropdown按钮 无dropdown menu apears 我想特别提到的是 我还包
  • 如何在模态打开时防止主体滚动

    我在用着W3schools 模态脚本 https www w3schools com howto tryit asp filename tryhow css modal我想添加一个功能 防止模型打开时整个主体滚动 我根据我的需要对原始脚本做
  • 使用 CSS 折叠和展开元素

    我正在尝试构建一个页面 加载时仅可见标题 并且 当用户单击标题时 每个标题下方的表格会在隐藏和显示状态之间切换 我的限制是只能在 CSS 中执行此操作 这是我到目前为止想到的 https jsfiddle net Argoron c1ypx
  • Chrome:当父级固定时,无法将一个绝对 div 放置在另一个 div 上

    我发现 当我想要位于顶部的 div 的父级固定时 我无法将一个绝对定位的 div 放置在 Chrome 中的另一个 div 上 div div div div div div 这是演示该问题的 JSFiddle http jsfiddle
  • 如何为 HTML 元素创建鼠标拖动滑块?

    我发现的许多滑块插件要么仅单击以查看下一个图像 要么如果它们确实具有鼠标拖动或触摸拖动功能 则仅允许图像 有谁知道为任何 html 元素编写鼠标拖动滑块的插件或可能的方法 我专门使用 SVG 但将来如果能在 div 元素之间滑动就更好了 H
  • 将图像作为框架放置在 iframe 周围?

    我有一个网站尝试以移动格式显示 但在宽屏幕上 我确信 iframe 是正确的选择 我正在尝试将 iframe 加载到 iPhone 的图像中 你可以看一个例子here http webfro gs south tour iframe tes
  • 有角度的动态背景图片

    在 html 模板中 我有这种带有动态图像的样式 div style background none width 200px height 150px div 它适用于网络浏览器和 Android 浏览器 但是 使用 style 的动态背景
  • 删除子元素上的 CSS 过滤器

    我的 CSS 代码有问题 正如您所看到的 我在 li 元素上有过滤器 但它覆盖了其他元素 我需要使其他两个元素没有过滤器 有没有可能这样做 main width 300px height 300px background color blu
  • 如何选择具有“A”类但不具有“B”类的 div?

    我有一些 div div class A Target div div class A B NotMyTarget div div class A C NotMyTarget div div class A D NotMyTarget di
  • 网站的主体和元素固定在 980px 宽度上,不会缩小

    我试图在 Rails 应用程序顶部启动前端 仅 HTML CSS 页面 但在使用 320px 视口时遇到问题 有些元素不会按比例缩小 我不明白为什么 我已经完成了检查元素 为各种元素提供了max width 100 and or width
  • 刷新页面时保存用户的选择

    我目前有一个页面显示不同团队的数据 我有一些数据 用户可以单击使其处于 打开 或 关闭 状态 并为每个数据显示不同的图标 它基本上就像一个清单 只是没有物理复选框 我想记住哪些 复选框 已被选中 即使在用户刷新页面或关闭浏览器并稍后返回之后
  • 在移动设备上滚动

    这个问题更多的是一个建议研究 我确实希望它对其他人有帮助 并且它不会关闭 因为我不太确定在哪里寻求有关此事的建议 在过去的 6 个月里 我一直在进行移动开发 我有机会处理各种设备上的各种情况和错误 最麻烦的是滚动问题 当涉及到在网站的多个区
  • 如何创建适合屏幕宽度的等宽/高框? [复制]

    这个问题在这里已经有答案了 我正在尝试建立一个网站 其中有很多宽度和高度相等的框 例如 我有一个页面 其中并排有两个相同大小的框 简单的解决方案是将宽度和高度设置为 50vw 这在出现滚动条之前效果很好 我已经用谷歌搜索了几个小时 但无法理
  • 使用css bootstrap时如何仅向一列添加右边框?

    我正在尝试使用CSS引导框架 http getbootstrap com css tables在我的项目中 我正在使用带有以下类的表table table bordered table striped 我想删除除第一列之外的所有列的边框 这

随机推荐

  • linux系统之字符设备驱动——DS18B20温度传感器

    linux系统之字符设备驱动 DS18B20温度传感器 1 原理图 2 驱动程序 驱动程序 ds18b20 c Author your name Date 2021 02 06 19 41 29 LastEditTime 2021 02 2
  • css根据内容自动调整td高度,css – 如何使div高度100%内部td的100%

    这个问题似乎在stackoverflow上至少有10次 但是其中一个实际上没有答案 这一点略有不同 因为问题出现在Firefox中 我的桌子高度为100 高度为100 我把td的边界设置成可以看到的东西 我看到td是预期的100 我把一个d
  • JS前端点击记住密码之后再次登录时显示账号密码

    一 前端html代码 div div
  • Nacos下载与安装详解

    目录 一 安装与下载 二 数据持久化 三 docker当中安装nacos 一 安装与下载 下载地址 https github com alibaba nacos releases 我这里下载的windows版本的 不需要安装 下载好直接解压
  • requests.exceptions.InvalidHeader: Value for header {XX: (‘XX‘,)} must be of type str or bytes, not

    requests exceptions InvalidHeader Value for header xxx xxx must be of type str or bytes not
  • Http协议及各版本对比

    前言 本文主要简单介绍http协议发展的历史版本以及https的安全机制 对于更多深入协议内层及网络通信相关的知识 在此暂不做总结 何谓Http协议 超文本传输协议 Hypertext Transfer Protocol HTTP 是一个简
  • echart单系列柱状图增加配置筛选legend

    先看整体效果图 这边简单说下实现思路 单列柱子在官网demo是没有legend的 但是多列柱子是有的 因此 我们可以让单列柱子变成多列柱子的集合 然后集合里面只有一列是有data的 相当于是这样的集合 0 1 0 然后使用重叠配置 把那些空
  • 安卓9.0适配方案和踩坑

    年初的时候就已经适配了安卓9 0 但由于业务需求一直没有使用上 前段时间发布了 结果有用户反馈在安卓9 0的手机上更新下载App发生了闪退 这个时候发现9 0对权限 加密和Apache HTTP client发生了相关变化 一 首先我遇到的
  • matlab解决线性规划

    线性规划 线性规划 Linear programming 简称LP 是运筹学中研究较早 发展较快 应用广泛 方法较成熟的一个重要分支 它是辅助人们进行科学管理的一种数学方法 研究线性约束条件下线性目标函数的极值问题的数学理论和方法 英文缩写
  • 数据库间歇性失败 OERR: ORA-12519

    ORA 12519 TNS 没有找到适用的服务处理 OERR ORA 12519 TNS no appropriate service handler found 客户端连接间歇性失败 报错ORA 12519 Oracle客户端与服务器之间
  • select、poll、epoll之间的区别(搜狗面试)(转载)

    1 select gt 时间复杂度O n 它仅仅知道了 有I O事件发生了 却并不知道是哪那几个流 可能有一个 多个 甚至全部 我们只能无差别轮询所有流 找出能读出数据 或者写入数据的流 对他们进行操作 所以select具有O n 的无差别
  • 云服务器文件打包,如何把云服务器的文件打包出来

    如何把云服务器的文件打包出来 内容精选 换一换 文档数据库服务支持开启公网访问功能 通过弹性IP进行访问 您也可通过弹性云服务器的内网访问文档数据库 要将已有的MongoDB数据库迁移到文档数据库 需要先使用mongoexport工具对它做
  • boa的cgi使用总结

    相关配置 配置ScriptAlias 虚拟路径 真实路径 ScriptAlias cgi bin etc boa www cgi bin 指明CGI脚本的虚拟路径对应的实际路径 一般所有的CGI脚本都要放在实际路径里 用户访问执行时输入站点
  • 如何让 uni-app 页面中的背景图片高度和宽度自适应

    如何让 uni app 页面中的背景图片高度和宽度自适应 在今天做项目的时候突然遇到一个问题 我给页面加一个背景图片 但是当页面高度超过100 时 图片会覆盖不到 如图所示 写的代码是这样的 错误的代码 App vue 页面
  • 创建、运行线程,设置线程属性

    Java 9并发编程指南 目录 创建 运行线程 设置线程属性 准备工作 实现过程 工作原理 扩展学习 更多关注 a中有两种方式创建一个线程 继承Thread 类 重写run 方法 创建一个类 实现Runnable接口和run 方法 然后通过
  • 递归算法实现链表两数相加

    LeetCode2题 链表两数相加递归实现 思路 递归 就是在一个方法了不断调用自己 使用递归 明确三点 1 递归终止的条件 2 找返回值 3 本级递归应该做什么 递归只关心本一级需要做什么 而不需要想下一步做什么 即使可能存在很多步 只需
  • leetcode1047——Remove All Adjacent Duplicates In String

    题目大意 一次遍历 删除字符串中所有的相邻重复字符 比如abbaca gt ca 分析 用字符串实现栈 遍历字符串 如果当前字符和栈顶相同就弹栈 否则入栈 代码 class Solution public string removeDupl
  • icmp报文

    一 概述 1 ICMP允许主机或路由报告差错情况和提供有关异常情况 ICMP是因特网的标准协议 但ICMP不是高层协议 而是IP层的协议 通常ICMP报文被IP层或更高层协议 TCP或UDP 使用 一些ICMP报文把差错报文返回给用户进程
  • NDK No implementation found for void com.*

    android jni 遇到报错No implementation found for void com 很多时候遇到这种情况 查找不到原因 还有的时候 之前好好的 后来出错了 再去检查C代码确实有实现的方法 那么问题在哪呢 这边建议去查看
  • css 行高

    1 什么是行高 以及行高的概念 我们可以试想一下 为什么会要有行高 我现在不需要行高不是完全可以的嘛 我们可以仔细看看这个 这不是很正常的嘛 那我们来看看这个 那当我们第一次看到这个的时候你觉得是横着度 还是竖着读 合理的行高可以让我们阅读