当前位置： 首页 > news >正文

【CSS in Depth 2 精译_078】12.6 调整字间距，提升可读性 + 12.7 本章小结

news 文章来源：https://blog.csdn.net/frgod/article/details/144477994 2025/5/15 13:39:01

当前内容所在位置（可进入专栏查看其他译好的章节内容）

  • 第四部分 视觉增强技术 ✔️
  • 【第 12 章 CSS 排版与间距】 ✔️
    • 12.1 间距设置
      • 12.1.1 使用 em 还是 px
      • 12.1.2 对行高的深入思考
      • 12.1.3 行内元素的间距设置
    • 12.2 Web 字体
    • 12.3 谷歌字体
    • 12.4 @font-face 的工作原理
      • 12.4.1 字体格式与回退处理
      • 12.4.2 同一字型的多种变体形式
    • 12.5 性能因素考量
      • 12.5.1 font-display 属性解析
      • 12.5.2 可变字体的用法
    • 12.6 调整字间距，提升可读性 ✔️
      • 12.6.1 正文的字间距 ✔️
      • 12.6.2 标题、小元素和间距 ✔️
    • 12.7 本章小结 ✔️

文章目录

    • 12.6 调整字间距，提升可读性 Adjusting space for readability
      • 12.6.1 正文的字间距 Body copy spacing
      • 12.6.2 标题、小元素和间距 Headings, small elements, and spacing
    • 12.7 本章小结 Summary

《CSS in Depth》新版封面

《CSS in Depth》新版封面

译者按
终于来到了本章的最后一节内容，首先恭喜那些和我一起一步一个脚印学到这里的朋友们。其实学到这里说一点都不累肯定是骗人的，因为这一章介绍了大量不怎么接触到的知识，也是我平时大概率会跳过的内容；更何况学完还得在本地运行一下代码，最后消化完每个章节的知识点还得结合第一版一字一句地完成新版内容的翻译。这些细枝末节的东西如果想得太多，自己很可能就断更了。之所以能更到第 78 篇，完全是因为我坚信当前所做的一切都是值得的。毕竟，谁能率先在当前心浮气躁的大环境中沉下心来不断深耕，夯实基础，谁就能早一天迎来真正的曙光。愿共勉之。

12.6 调整字间距，提升可读性 Adjusting space for readability

让我们再回到页面上。此时的 Web 字体 Roboto 和 Sansita 已加载完毕，我们可以按照设计稿再调整一下。这里涉及两个属性（properties）：line-height 和 letter-spacing。它们可以控制文本行之间的距离（垂直方向）和单个字符之间的距离（水平方向）。

很多开发者往往不太看重这两个属性。如果在页面开发过程中多花点时间调整它们，整个网站的外观都将得到显著改善。除此之外，还可以让用户阅读更加舒适，从而增加用户黏性。

如果文字间距太过紧凑，多读几句话甚至多看几个字都会明显感觉费劲；要是间距过大也会有同样的问题。图 12.16 展示了多个不同间距的文字版本。

图 12.16 文字间距会对阅读体验产生显著影响

【图 12.16 文字间距会对阅读体验产生显著影响】

试着读一下左上方的压缩版文字，就会发现需要更加集中注意力才行。可能一不小心就漏掉一行或者重复阅读同一行，而且很快就读不下去了。这样的页面显得拥挤不堪，毫无条理。而左下方的文字又过于分散了些，致使每个字母都占用了太多注意力，不太容易在大脑里组合成单词。相比之下，右上方的文字就舒服多了，看上去“刚刚好”，是这三个版本中最容易阅读的。

12.6.1 正文的字间距 Body copy spacing

为 line-height 和 letter-spacing 找到合适的值是件主观性很强的事。最好的解决方案通常是多试几个值；如果找到某两个值一个过于紧凑、另一个过于松散，那就取介于二者之间的某个值。所幸，下面介绍的这些经验法则可以为您提供帮助。

line-height 属性的初始值（initial value）是关键字 normal，大概等于 1.2（确切的数值是在字体文件中编码的，它们取决于字体的 em 大小）；但是在大部分情况下，这个值偏小。对于正文内容而言，行高介于 1.4 到 1.6 之间较为理想。

我们已经在上一章为 <body> 元素设置了 1.4 倍行高。这个值会被页面中的其他元素继承。试想如果没有了这个行高值页面会怎样渲染。图 12.17 展示了其中一个板块的前后效果对比。在左侧的版本中，line-height 和 letter-spacing 属性均为初始值；而右侧的版本是调整后的效果（我们的目标是把字间距调整为右侧的版本）。

图 12.17 Ink 页面的一个板块效果对比，其中左侧为原始的字间距效果，右侧为手动调整后的效果

【图 12.17 Ink 页面的一个板块效果对比，其中左侧为原始的字间距效果，右侧为手动调整后的效果】

把 line-height 的值改为 1.3 或者 1.5，看看效果如何。是不是比之前 1.4 倍行距的效果好一些。

提示

一段文字越长，行高也应该相应越大。这样读者的眼睛才更容易扫到下一行，而不会分散注意力。理想情况下，每行文字的长度应该控制在 45 至 75 个字符之间，一般认为这样的长度最利于阅读。

接着再来看看 letter-spacing 属性。如果用的是精心设计过的字体，可能并不需要调整默认的字间距，但偶尔适当的调整也可以进一步提高可读性，因此还是有必要带您过一遍，看看如何进行修改。修改该属性的另一个应用场景还可以是出于风格方面的考虑，对页面上的某些位置（如按钮或标题）进行微调。

letter-spacing 属性需要一个长度值，用来设置每个字符间的间距。即使只设置 1px，也是很夸张的字间距了；因此它应该是一个非常小的值。在尝试找到最佳属性值的过程中，通常我会每次只增加 1em 的 1/100（例如 letter-spacing: 0.01em）。请根据代码清单 12.12 同步更新本地样式表中的字间距。

代码清单 12.12 在 body 元素上设置字间距

@layer global {body {margin: 0;font-family: Roboto, sans-serif;line-height: 1.4; /* 行高和字间距将被页面上的所有元素继承 */letter-spacing: 0.01em; /* 在各字符之间再添加 0.01em 的字间距 */background-color: var(--extra-light-gray);color: var(--text-color);}
}

不妨尝试将字间距增至 0.02em 或 0.03em，看看页面效果如何。您可能不具备设计师的专业眼光，没办法确定哪种效果更好；但是没关系，跟着感觉走就行了。如果还是有疑虑，那就保守一点，不要设置得太开。我们的目的不在于吸引用户注意字间距，而是恰恰相反。在 Ink 页面上，我发觉 0.01em 和 0.02em 看着都不错，那就保守一点选用 0.01em。

把行距和字距转换为 CSS 样式

在设计领域，文本行之间的距离称为 行距（leading），与单词 bedding 谐音。它起源于印刷版每行文字之间添加的一条条铅引导线。而字符之间的距离则称为 字距（tracking）。如果与设计师一起工作，它们可能会在设计稿中指明行距和字距，但这些尺寸看起来和 CSS 中的 line-height 和 letter-spacing 属性完全不沾边。

行距一般以 “点（point）” 为单位进行描述，例如 18pt，代表的是一行文字的高度加上它与下一行文字之间的距离。这其实与 CSS 中的 line-height 类似，只不过没有用不带单位的数字来描述罢了。实际转换时必须像定义字号那样，先将行距转为像素尺寸，然后再计算出对应的不带单位的行高值。

而要把 pt 单位转为 px 单位，需将 pt 值乘以 1.333（因为 1 英寸为 96px，并且 1 英寸也等于 72pt，因此 96 / 72 = 1.333px/pt）。因此 18pt × 1.333px/pt = 24px。然后除以字号，就得到了不带单位的行高值，即 24px / 16px = 1.5。

而字距（tracking）通常会给定某个数字，例如 100。因为一个单位的该数字表示 1em 的千分之一，因此除以 1000 就可以转为 em 单位值，即 100 / 1000 = 0.1em。

12.6.2 标题、小元素和间距 Headings, small elements, and spacing

标题的间距通常和正文内容不太一样。正文间距调整好后，需要检查一下标题，看看是否也需要调整。

标题一般比较简短，通常只有几个字，但即便偶尔才会遇到长标题，页面样式也应该考虑这种情况。在页面设计时常犯的一个错误就是只测试短标题。既然页面行高已经设定，就可以试着给各级标题添加文字内容，看看标题强制换行后的效果如何（如图 12.18）。

图 12.18 让标题强制换行，看看行高是否合适

【图 12.18 让标题强制换行，看看行高是否合适】

在本例中，由于垂直间距看上去还可以，这里就不做修改了。但检查行高这一步绝不能少。有时候 1.4 倍行高可能会显得有点宽，这也要看所选用的字型（typeface），尤其是设置大字号的时候。我曾经遇到过一些网站就是这样的情况，最后不得不把标题的行高调低到 1.0。

而对于正文主体而言，调整间距的重点在于使用户的阅读体验效果最佳。但对于标题以及其他内容偏少的页面元素（如按钮）来讲，这一点影响不大。这时字间距的可调节范围就大大增加了，也可以有更多发挥想象的空间了，甚至可以使用负的字间距来让文字渲染得更加紧凑。例如图 12.19 里的标语就声明了 letter-spacing: -0.02em 的样式。

图 12.19 页面上内容简短、风格鲜明的部分，可以考虑使用更为紧凑的字符间距

【图 12.19 页面上内容简短、风格鲜明的部分，可以考虑使用更为紧凑的字符间距】

上述样式的间距变化还是很明显的（dramatic）。如果是几段文件都用这样的间距样式，阅读起来就会很费劲；但对于小段文本效果还不错（也就几个字）。于是标题就按这个版本设置，并根据代码清单 12.13 同步更新本地样式表。

代码清单 12.13 紧凑版标语的字间距设置

.hero h2 {margin-block: 0 10px;font-size: 1.95rem;letter-spacing: -0.02em; /* 利用负的 letter-spacing 来压缩字间距 */
}

我们也可以重新评估一下页面小型元素的间距和文本，例如按钮。在我看来此时的按钮看起来稍微偏大了些，尤其是页头的导航按钮部分。我们来调整一下。图 12.20 展示了现在的效果（上）以及调整后的效果（下）。

图 12.20 调整文本属性可以改善导航按钮的外观

【图 12.20 调整文本属性可以改善导航按钮的外观】

这里做了如下调整：减小字号，使用 text-transform 把字母转为大写，并上调字符间距（letter spacing）。

提示

通常字母全部大写的文字再配合较大的字间距，看上去效果会更好一些。

要实现上述效果，请将代码清单 12.14 中带注解内容的样式声明同步到本地样式表中。

代码清单 12.14 调整导航菜单项上的尺寸和间距样式

.nav-container__inner {display: flex;justify-content: space-between;align-items: end; /* 令导航容器中的元素底部对齐 */max-inline-size: 1080px;margin-inline: auto;padding: 0.625em 0;
}....top-nav a {display: block;font-size: 0.8rem; /* 减小导航链接和按钮的字号 */padding: 0.3rem 1.25rem; /* 将内边距的值由 em 改为 rem */color: var(--white);background: var(--brand-green);text-decoration: none;border-radius: 3px;text-transform: uppercase; /* 将导航链接改为大写 */letter-spacing: 0.03em; /* 增加字间距 */
}

因为调小了导航链接的字号，所以它们将不再填充 nav-container 内容盒的高度。默认情况下这些链接元素是顶部对齐的，下方会空出一些区域。将 nav-container 的弹性子元素设为底部对齐（即 align-items: end）就可以解决这个问题。

由于导航元素的字号已经改变，其内边距（之前以相对单位 em 来设置大小）也会随之改变。为此，这里将尺寸单位改为 rem。当然也可以通过计算得出新的以 em 为单位的相对尺寸，但这样做并不值得。

text-transform 属性可能较为陌生。它可以把所有字母改为大写，无论在 HTML 中是如何书写的。这里强烈推荐这种方式，而不是到 HTML 里手动将文字改为大写。这样依赖，如果将来设计稿修改了，就可以只改一行 CSS，而不必在所有 HTML 页面的多个位置进行修改。只有当需要遵循某种语法规则的大写（例如首字母缩略词）时，才应该在 HTML 中大写。而像本例这样只是单纯出于设计上的考虑而渲染的大写形式，仅通过 CSS 就能实现。

text-transform 属性的另一个合法值为 lowercase，用于将所有字母转为小写。此外还可以设为 capitalize，用于将每个单词的首字母转为大写形式、其余字母保持 HTML 中的原始写法。

12.7 本章小结 Summary

  • 文本的行高会影响元素所在的内容盒尺寸。在对页面间距进行微调时需要将这个高度纳入考虑范围。
  • 利用谷歌字体这样的字体托管服务，Web 字体可以轻松集成到页面中。
  • 利用 @font-face 规则可以轻松托管自己的 Web 字体。该规则可以定义字体名称、限定字体粗细及各种字体样式。
  • Web 字体会占用大量的页面空间；为此需要限制 Web 字体的数量，并尽可能选用可变字体，让页面进一步轻量化。
  • font-display 属性用于控制页面在 Web 字体加载时的初始渲染方式。
  • 文字间距的调节可通过 line-height 和 letter-spacing 属性实现。正文内容的行高通常在接近 1.5 时效果最佳；而对于大标题，保持较小的间距往往效果更好。

关于《CSS in Depth》（中译本书名《深入解析 CSS》）

第 1 版第 2 版
读者评分原版：4.7（亚马逊）；中文版：9.3（豆瓣）原版：5.0（亚马逊）；中文版：暂无，待出版
出版时间原版：2018 年 3 月；中文版：2020 年 4 月原版：2024 年 7 月；中文版：暂无，待出版
原价原版：$44.99；中文版：￥139.00原版：$59.99；中文版：暂无，待出版
现价原版：$36.49；中文版：￥52.54 起步原版：$52.09；中文版：暂无，待出版
原版国内预订起步价 ￥461.00起步价 ￥750.00

本专栏为该书第 2 版高分译文专栏，全网首发，精译精校，持续更新，计划今年内完成全书翻译，敬请期待！！！

目前已完结的章节（可进入本专栏查看详情，连载期间完全免费）：

  • 第一章 层叠、优先级与继承（已完结）
    • 1.1 层叠
    • 1.2 继承
    • 1.3 特殊值
    • 1.4 简写属性
    • 1.5 CSS 渐进式增强技术
    • 1.6 本章小结
  • 第二章 相对单位（已完结）
    • 2.1 相对单位的威力
    • 2.2 em 与 rem
    • 2.3 告别像素思维
    • 2.4 视口的相对单位
    • 2.5 无单位的数值与行高
    • 2.6 自定义属性
    • 2.7 本章小结
  • 第三章 文档流与盒模型（已完结）
    • 3.1 常规文档流
    • 3.2 盒模型
    • 3.3 元素的高度
    • 3.4 负的外边距
    • 3.5 外边距折叠
    • 3.6 容器内的元素间距问题
    • 3.7 本章小结
  • 第四章 Flexbox 布局（已完结）
    • 4.1 Flexbox 布局原理
    • 4.2 弹性子元素的大小
    • 4.3 弹性布局的方向
    • 4.4 对齐、间距等细节处
    • 4.5 本章小结
  • 第五章 网格布局（已完结）
    • 5.1 构建基础网格
    • 5.2 网格结构剖析 （上）
      • 5.2.1 网格线的编号（下）
      • 5.2.2 网格与 Flexbox 配合（下）
    • 5.3 两种替代语法
      • 5.3.1 命名网格线
      • 5.3.2 命名网格区域
    • 5.4 显式网格与隐式网格（上）
      • 5.4.1 添加变化 （中）
      • 5.4.2 让网格元素填满网格轨道（下）
    • 5.5 子网格（全新增补内容）
    • 5.6 对齐相关的属性
    • 5.7 本章小结
  • 第六章 定位与堆叠上下文（已完结）
    • 6.1 固定定位
      • 6.1.1 创建一个固定定位的模态对话框
      • 6.1.2 在模态对话框打开时防止屏幕滚动
      • 6.1.3 控制定位元素的大小
    • 6.2 绝对定位
      • 6.2.1 关闭按钮的绝对定位
      • 6.2.2 伪元素的定位问题
    • 6.3 相对定位
      • 6.3.1 创建下拉菜单（上）
      • 6.3.2 创建 CSS 三角形（下）
    • 6.4 堆叠上下文与 z-index
      • 6.4.1 理解渲染过程与堆叠顺序（上）
      • 6.4.2 用 z-index 控制堆叠顺序（上）
      • 6.4.3 深入理解堆叠上下文（下）
    • 6.5 粘性定位
    • 6.6 本章小结
  • 第七章 响应式设计（已完结）
    • 7.1 移动端优先设计原则（上篇）
      • 7.1.1 创建移动端菜单（下篇）
      • 7.1.2 给视口添加 meta 标签（下篇）
    • 7.2 媒体查询（上篇）
      • 7.2.1 深入理解媒体查询的类型（上篇）
      • 7.2.2 页面断点的添加（中篇）
      • 7.2.3 响应式列的添加（下篇）
    • 7.3 流式布局
    • 7.4 响应式图片
    • 7.5 本章小结
  • 第八章 层叠图层及其嵌套
    • 8.1 用 layer 图层来操控层叠规则（上篇）
      • 8.1.1 图层的定义（上篇）
      • 8.1.2 图层的顺序与优先级（下篇）
      • 8.1.3 revert-layer 关键字（下篇）
    • 8.2 层叠图层的推荐组织方案
    • 8.3 伪类 :is() 和 :where() 的用法
    • 8.4 CSS 嵌套的使用
      • 8.4.1 嵌套选择器的使用
      • 8.4.2 深入理解嵌套选择器
      • 8.4.3 媒体查询及其他 @规则 的嵌套
    • 8.5 本章小结
  • 第九章 CSS 的模块化与作用域
    • 9.1 模块的定义
      • 9.1.1 模块和全局样式
      • 9.1.2 一个简单的 CSS 模块
      • 9.1.3 模块的变体
      • 9.1.4 多元素模块
    • 9.2 将模块组合为更大的结构
      • 9.2.1 模块中多个职责的拆分
      • 9.2.2 模块的命名
    • 9.3 CSS 的作用域
      • 9.3.1 CSS 作用域的就近原则
      • 9.3.2 划定作用域的边界
      • 9.3.3 CSS 中的隐式作用域
      • 9.3.4 关于 CSS 作用域与层叠图层
    • 9.4 CSS 模式库
    • 9.5 本章小结
  • 第十章 CSS 容器查询
    • 10.1 容器查询的一个简单示例
      • 10.1.1 容器尺寸查询的用法
    • 10.2 深入理解容器
      • 10.2.1 容器的类型
      • 10.2.2 容器的名称
      • 10.2.3 容器与模块化 CSS
    • 10.3 与容器相关的单位
    • 10.4 容器样式查询的用法
      • 10.4.1 将模块与所在容器解耦
      • 10.4.2 减少重复代码
    • 10.5 本章小结
  • 第 11 章 颜色与对比
    • 11.1 通过对比进行交流
      • 11.1.1 模式的建立
      • 11.1.2 还原设计稿
    • 11.2 颜色的定义
      • 11.2.1 色域与色彩空间
      • 11.2.2 CSS 颜色表示法（RGB、Hex、HSL、HWB、LAB/OKLAB、LCH/OKLCH）
    • 11.3 利用 OKLCH 处理颜色（上篇）
      • 11.3.4 从页面其他颜色衍生出新颜色（下篇）
    • 11.4 思考字体颜色的对比效果
    • 11.5 本章小结
  • 附录
    • 附录A：CSS 选择器参考
    • 附录B：CSS 预处理器简介

相关文章：

【CSS in Depth 2 精译_078】12.6 调整字间距，提升可读性 + 12.7 本章小结

当前内容所在位置&#xff08;可进入专栏查看其他译好的章节内容&#xff09; 第四部分 视觉增强技术 ✔️【第 12 章 CSS 排版与间距】 ✔️ 12.1 间距设置 12.1.1 使用 em 还是 px12.1.2 对行高的深入思考12.1.3 行内元素的间距设置 12.2 Web 字体12.3 谷歌字体12.4 font-fac…...

编程日记 2024/12/18 23:44:39

泷羽sec学习打卡-brupsuite7搭建IP炮台

声明 学习视频来自B站UP主 泷羽sec,如涉及侵权马上删除文章 笔记的只是方便各位师傅学习知识,以下网站只涉及学习内容,其他的都 与本人无关,切莫逾越法律红线,否则后果自负 关于brupsuite的那些事儿-Brup-IP炮台搭建 搭建炮台服务端安装zmap1、更新系统和安装基础依赖&#xff…...

编程日记 2024/12/18 23:41:36

使用Svelte构建轻量级应用详解

文章目录 前言一、为什么选择Svelte&#xff1f;二、快速上手Svelte三、理解Svelte的核心概念四、优化性能与用户体验五、案例研究&#xff1a;构建一个待办事项应用结语 前言 Svelte是一款新兴的前端框架&#xff0c;以其小巧的体积、高效的性能和直观的API赢得了开发者的青睐…...

编程日记 2024/12/18 23:37:31

Qt设置部件的阴影效果

QT中的比如QWidget,QLabel,QPushbutton&#xff0c;QCheckBox都可以设置阴影效果&#xff0c;就像这样&#xff1a; 以QWidget为例&#xff0c;开始尝试使用样式表的形式添加阴影&#xff0c;但没有效果&#xff0c;写法如下&#xff1a; QWidget#widget1::shadow{color: rgb…...

编程日记 2024/12/18 23:36:30

Python 助力 DBA：高效批量管理数据库服务器的多线程解决方案-多库查询汇总工具实现

批量数据库服务器连接测试与数据汇总&#xff1a;Python实现方案 作为数据库服务器运维人员&#xff0c;我们经常需要面对大量服务器的连接测试和数据汇总工作。本文将介绍一个使用Python实现的高效解决方案&#xff0c;可以帮助我们快速完成这些任务。 需求概述 从配置文件…...

编程日记 2024/12/18 23:35:29

vue响应式数据-修改对象的属性值，视图不更新

如图&#xff1a; 一&#xff1a;问题是&#xff1a; 我把数据处理后能console.log()打印出来&#xff0c;但是页面的内容不能同步的更新渲染&#xff1b; 二&#xff1a;要求&#xff1a; 在数组循环列表里面&#xff0c;我点击单个的item按钮时&#xff0c;需要实时加载进度…...

编程日记 2024/12/18 23:32:25

【OpenCV计算机视觉】图像处理——平滑

本篇文章记录我学习【OpenCV】图像处理中关于“平滑”的知识点&#xff0c;希望我的分享对你有所帮助。 目录 一、什么是平滑处理 1、平滑的目的是什么&#xff1f; 2、常见的图像噪声 &#xff08;1&#xff09;椒盐噪声 ​编辑&#xff08;2&#xff09; 高斯噪声 &a…...

编程日记 2024/12/18 23:26:19

C#编程报错- “ComboBox”是“...ComboBox”和“...ComboBox”之间的不明确的引用

1、问题描述 在学习使用C#中的Winform平台编写一个串口助手程序时&#xff0c; 在编写一个更新ComboBox列表是遇到了问题&#xff0c;出错的代码是 2、报错信息 CS1503 参数 2: 无法从“System.Windows.Forms.ComboBox”转换为“System.Windows.Forms.ComboBox” CS1503 …...

编程日记 2024/12/18 23:24:18

JAVA：访问者模式（Visitor Pattern）的技术指南

1、简述 访问者模式（Visitor Pattern）是一种行为型设计模式，允许你将操作分离到不同的对象中，而无需修改对象本身的结构。这种模式特别适合复杂对象结构中对其元素进行操作的场景。 本文将介绍访问者模式的核心概念、优缺点，并通过详细代码示例展示如何在实际应用中实现…...

编程日记 2024/12/18 23:20:14

YashanDB共享集群产品能力观测：细节足见功底

本文基于前泽塔数科研发总监-王若楠2024年11月在“2024年国产数据库创新生态大会”-“根”技术专场的演讲整理形成&#xff0c;主要对崖山共享集群YAC的架构、功能、高可用性、性能四大方面进行全面测试&#xff0c;并分享了测试环境和测试结论。 年初&#xff0c;基于某些商业…...

编程日记 2024/12/18 23:17:11

【Linux】—简单实现一个shell（myshell）

大家好呀&#xff0c;我是残念&#xff0c;希望在你看完之后&#xff0c;能对你有所帮助&#xff0c;有什么不足请指正&#xff01;共同学习交流哦&#xff01; 本文由&#xff1a;残念ing原创CSDN首发&#xff0c;如需要转载请通知 个人主页&#xff1a;残念ing-CSDN博客&…...

编程日记 2024/12/18 23:13:08

@FeignClient用于Nacos微服务间的接口调用

依赖&#xff1a;<!-- spring-boot启动依赖 --> <!-- 提供者 --> <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId> </dependency> <!-- openFeign --> <…...

编程日记 2024/12/18 23:12:07

认识javascript中的模块化

什么是模块化&#xff1f; 将程序⽂件依据⼀定规则拆分成多个文件&#xff0c;拆分出来每个⽂件就是⼀个模块&#xff0c;模块中的数据都是私有的&#xff0c;模块之间互相隔离。如果不进行隔离&#xff0c;可能会造成模块间的变量定义有冲突&#xff0c;导致程序崩溃 为啥要使…...

编程日记 2024/12/18 23:11:04

容器设计模式：Sidecar

文章目录 容器设计模式&#xff1a;Sidecar 模式1. 什么是 Sidecar 模式&#xff1f;2. Sidecar 模式的原理2.1 工作机制2.2 常见用途 3. Sidecar 模式示例示例&#xff1a;日志收集 4. Sidecar 模式的架构图图例&#xff1a; 5. Sidecar 模式的优点6. Sidecar 模式的局限性7. …...

编程日记 2024/12/18 23:05:54

ensp 静态路由配置

A公司有广州总部、重庆分部和深圳分部3个办公地点&#xff0c;各分部与总部之间使用路由器互联。广州、重庆、深圳的路由器分别为R1、R2、R3&#xff0c;为路由器配置静态路由&#xff0c;使所有计算机能够互相访问&#xff0c;实训拓扑图如图所示 绘制拓扑图 给pc机配置ip地址…...

编程日记 2024/12/18 23:02:51

MATLAB图卷积神经网络GCN处理分子数据集节点分类研究

全文链接&#xff1a;https://tecdat.cn/?p38570 本文主要探讨了如何利用图卷积网络&#xff08;GCN&#xff09;对图中的节点进行分类。介绍了相关的数据处理、模型构建、训练及测试等环节&#xff0c;通过对分子数据集的操作实践&#xff0c;展示了完整的节点分类流程&#…...

编程日记 2024/12/18 23:00:48

Android-Glide详解

目录 一&#xff0c;介绍 二&#xff0c;使用 三&#xff0c;源码分析思路 四&#xff0c;with源码分析 五&#xff0c;模拟Glide生命周期管理 一&#xff0c;介绍 Glide目前是安卓最主流的加载图片的框架&#xff0c;也是源码最为复杂的框架之一。 要想完完全全吃透Glide的源…...

编程日记 2024/12/18 22:59:47

2.Nuxt学习 组件使用和路由跳转相关

组件定义和使用 普通组件的使用 在Nuxt的项目中&#xff0c;可以直接在components文件夹下建立组件 在页面中直接使用 无需引入 多层级组件的使用 我们有时候会需要多层级组件来简化代码结构 比如我们需要给Banner组件添加一个子组件 我们直接建立其名称的文件夹 写入子组…...

编程日记 2024/12/18 22:55:42

代码开发相关操作

使用Vue项目管理器创建项目&#xff1a;&#xff08;vue脚手架安装一次就可以全局使用&#xff09; windowR打开命令窗口&#xff0c;输入vue ui&#xff0c;进入GUI页面&#xff0c;点击创建-> 设置项目名称&#xff0c;在初始化git下面输入&#xff1a;init project&…...

编程日记 2024/12/18 22:54:37

动态导出word文件支持转pdf

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、功能说明二、使用步骤1.controller2.工具类 DocumentUtil 导出样式 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 例如&#xff…...

编程日记 2024/12/18 22:53:35

登陆harbor发现证书是错误的, 那么如何更新harbor的证书呢

Error response from daemon: Get "https://172.16.21.35/v2/": tls: failed to verify certificate: x509: certificate is valid for 127.0.0.1, ::1, 172.16.21.30, not 172.16.21.35 版本 v2.10.1-b7b88476 不需要从头看, 直接看最下面的成功的证书创建 这里面首…...

编程日记 2024/12/18 22:51:32

【Leetcode Top 100】199. 二叉树的右视图

问题背景 给定一个二叉树的 根节点 r o o t root root&#xff0c;想象自己站在它的右侧&#xff0c;按照从顶部到底部的顺序&#xff0c;返回从右侧所能看到的节点值。 数据约束 二叉树的节点个数的范围是 [ 0 , 100 ] [0,100] [0,100] − 100 ≤ N o d e . v a l ≤ 100…...

编程日记 2024/12/18 22:50:31

React自学：如何使用localStorage，以及如何实现删除笔记操作

1. 初始化notes 以下这段代码完成了这些操作&#xff1a; 调用 localStorage.getItem("notes") 从浏览器的本地存储中获取名为 “notes” 的数据。使用 JSON.parse 将获取到的字符串解析成数组。如果本地存储中没有 “notes” 数据&#xff08;返回值为 null&#…...

编程日记 2024/12/18 22:49:30

go语言使用websocket发送一条消息A，持续接收返回的消息

在Go语言中实现一个WebSocket客户端&#xff0c;可以使用gorilla/websocket这个非常流行的库来处理WebSocket连接。下面是一个简单的示例&#xff0c;展示了如何创建一个WebSocket客户端&#xff0c;向服务器发送消息"A"&#xff0c;并持续接收来自服务器的响应。 首…...

编程日记 2024/12/18 22:48:29

如何对小型固定翼无人机进行最优的路径跟随控制？

控制架构 文章继续采用的是 ULTRA-Extra无人机&#xff0c;相关参数如下&#xff1a; 这里用于guidance law的无人机运动学模型为&#xff1a; { x ˙ p V a cos ⁡ γ cos ⁡ χ V w cos ⁡ γ w cos ⁡ χ w y ˙ p V a cos ⁡ γ sin ⁡ χ V w cos ⁡ γ w sin ⁡ χ…...

编程日记 2024/12/18 22:46:25

C++常见面试题-初级2

1. C和C有什么区别&#xff1f; C是面向对象的语言&#xff0c;而C是面向过程的语言&#xff1b;C引入new/delete运算符&#xff0c;取代了C中的malloc/free库函数&#xff1b;C引入引用的概念&#xff0c;而C中没有&#xff1b;C引入类的概念&#xff0c;而C中没有&#xff1…...

编程日记 2024/12/18 22:44:20

Spring Security 6 系列之二 - 基于数据库的用户认证和认证原理

之所以想写这一系列&#xff0c;是因为之前工作过程中使用Spring Security&#xff0c;但当时基于spring-boot 2.3.x&#xff0c;其默认的Spring Security是5.3.x。之后新项目升级到了spring-boot 3.3.0&#xff0c;结果一看Spring Security也升级为6.3.0&#xff0c;关键是其风…...

编程日记 2024/12/18 22:41:15

mfc140.dll是什么东西?mfc140.dll缺失的几种具体解决方法

mfc140.dll是Microsoft Foundation Classes&#xff08;MFC&#xff09;库中的一个动态链接库&#xff08;DLL&#xff09;文件&#xff0c;它是微软基础类库的一部分&#xff0c;为Windows应用程序的开发提供了丰富的类库和接口。MFC库旨在简化Windows应用程序的开发过程&…...

编程日记 2024/12/18 22:36:02

【STM32 Modbus编程】-作为主设备写入多个线圈和寄存器

作为主设备写入多个线圈和寄存器 文章目录 作为主设备写入多个线圈和寄存器1、硬件准备与连接1.1 RS485模块介绍1.2 硬件配置与接线1.3 软件准备2、写入多个线圈2.1 数据格式2.2 发送数据2.3 结果3、写入多个寄存器3.1 数据格式3.2 发送数据3.3 结果本文将实现STM32作为ModBus主…...

编程日记 2024/12/18 22:32:58

Windows安全中心（病毒和威胁防护）的注册

文章目录 Windows安全中心&#xff08;病毒和威胁防护&#xff09;的注册1. 简介2. WSC注册初探3. WSC注册原理分析4. 关于AMPPL5. 参考 Windows安全中心&#xff08;病毒和威胁防护&#xff09;的注册 本文我们来分析一下Windows安全中心&#xff08;Windows Security Center…...

编程日记 2024/12/18 22:31:57