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 行高 的相关文章

  • 如何使弹出窗口溢出:在溢出内可见:自动上下文

    我有一个 div 列表 如果超过父框 overflow x 应该滚动 并且在悬停时 我想看到一个弹出窗口 我的问题是 如果我将鼠标悬停在任何子 div 上 弹出窗口将被考虑用于溢出计算 但我只想让它在所有内容之上可见 而不是使其扩展滚动区域
  • JQuery 设置动态最大宽度

    我不太擅长 jQuery 因此完整的代码解决方案将是理想的选择 该函数将 获取浏览器屏幕的 70 宽度 将该宽度转换为其相应的 px 值 设置最大宽度 mainContainer使用从转换 计算中获得的值 这是我要设置的容器的 CSS 样式
  • IE10 中的弹性盒

    我试图让弹性框在 IE10 中工作 但它不起作用 Safari Chrome 和 Firefox 工作正常 但 IE10 不工作 有人知道答案吗 代码笔 http codepen io anon pen vcEGH http codepen
  • CSS3 变换:IE 中的缩放

    我想使用CSS3属性transform scale div transform scale 0 5 0 5 有没有办法在 Internet Explorer 8 及更低版本中模仿这个 可能与filter或者 JavaScript 解决方案
  • Bootstrap

    我正在尝试使用 Bootstrap 构建一个网站 到目前为止 一切都按计划进行 我想要一个固定的导航栏 并且我正在使用内置函数 div class navbar navbar fixed top 这很棒 正是我所需要的 但我希望导航和标题从
  • Ionic 2:隐藏滚动条并继续滚动

    我只想hide滚动条 在需要滚动的页面中 我正在使用离子2 My 不工作解决方案 scroll content bar overflow hidden 此解决方案隐藏滚动条but使屏幕不可滚动 首先 改变浏览器的自然行为和预期的用户体验是一
  • 悬停时从下到上填充按钮背景,从下到上填充文本颜色

    我需要创建按钮 并且在悬停时它不仅必须从下到上填充背景颜色 而且还必须从下到上更改文本颜色 我对这里的方法很满意 CSS 悬停时背景从下到上填充 https stackoverflow com questions 51562340 css
  • CSS 属性选择器类以以下开头但不等于

    我想将 css 应用于以 abcd 开头的所有类 但我不想将该 css 应用于名称为 abcd dontapply 的类 我可以这样做吗 我尝试过的 a class abcd not class abcd dontapply define
  • Bootstrap 4 Beta 0 网格系统上的 Rowspan

    您好 我正在开发一个使用 Bootstrap 4 Beta 的电子商务模板 我让它在移动设备上工作 但在桌面设备上我不知道如何让购买按钮保持在标题下 在我的方法中 它出现在 图库 部分下 Desired Desktop Desired Mo
  • 为什么我的 Web 组件 CSS 不显示?我没有使用shadowDOM

    我有一个没有使用 ShadowDOM 的 Native V1 组件 所以我将 CSS 放在 但是当其他人使用我的组件时 我的 CSS 就不再起作用了 仅当其组件确实使用 ShadowDOM 时才会发生这种情况 我的组件的示例代码 class
  • Bootstrap 3 工具提示被包裹在每个空白处?

    升级到 bootstrap 3 后 工具提示会包裹在每个空白处 我相信这是由于网格而发生的 因此 如果我为文本框选择列 col sm 3 并且如果我将工具提示放在右侧 它将包裹所有空白并显示如下 如果我执行 data placement t
  • 使用 CSS 更改 svg 图像的颜色 [重复]

    这个问题在这里已经有答案了 我的 html 文件中有以下 svg 图像 img class svg src my image link svg 现在 我尝试使用以下 css 代码更改颜色 svg path fill black 然而 一切都
  • CSS3 - 性能最佳实践是什么? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 表格底部的粘性滚动条

    我不确定 粘性 是否是这个术语 但是有没有办法使滚动条overflow auto保持可见 我有一个相当大的表格 我希望它可以水平滚动 但是 表格也相当高 因此当页面加载时 水平滚动条不在浏览器的视口内 因此很难判断表格是否可滚动 div s
  • 如何在同一个

    中设置两种不同的字体大小

    我有一段 HTML 代码 我一直坚持不下去 我怎样才能将这个文本的第一部分的字体大小设置为 20px 以及后面的文本 br 标签字体大小为 15px 或者 如果我做的完全错误 我该如何做而不将它们放在不同的标签中 p Los Santos
  • 通过 Javascript 更改 Webkit 属性?

    请帮助我 可能是因为我对 CSS 动画和 Javascript 相当陌生 但我使用的代码应该更改它的属性 当我运行代码时 它会执行代码中的所有其他操作 除了更改所需 div 的 CSS 属性 我已经尝试了所有这四种方法 但似乎都不起作用 它
  • css 在 body 上应用宽度

    我对 html 和 css 完全陌生 所以我的问题可能非常基本 但希望你们能帮助我 udnerstnad 我正在使用以下 css 代码 body background color Olive width 550px font family
  • 使绝对定位的div扩展父div高度

    正如你在下面的 CSS 中看到的 我想要child2将自己定位在之前child1 这是因为我目前正在开发的网站也应该在移动设备上运行 在移动设备上child2应该位于底部 因为它包含我想要在移动设备上的内容下方的导航 为什么不是 2 个母版
  • 如何在引导程序中制作两个等高的列?

    我有这个代码 HTML div class container fluid div class row div class col md 6 p Line p p Line p p Line p p Line p p Line p p Li
  • GWT - css 中常量的问题

    我是 GWT 新手 我正在构建一个小型示例应用程序 我有几个 CSS 文件 我能够成功使用 ClientBundle 和 CssResource 将样式分配给 UiBinder 脚本中定义的元素 现在我想更进一步 使用 def css ru

随机推荐

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