【CSS in Depth 2 精译_074】第 12 章 CSS 排版与间距概述 + 12.1 间距设置(下):行内元素的间距设置
当前内容所在位置(可进入专栏查看其他译好的章节内容)
- 第四部分 视觉增强技术 ✔️
- 【第 12 章 CSS 排版与间距】 ✔️
- 12.1 间距设置
- 12.1.1 使用 em 还是 px
- 12.1.2 对行高的深入思考
- 12.1.3 行内元素的间距设置 ✔️
- 12.2 Web 字体
- 12.3 谷歌字体
文章目录
- 12.1.3 行内元素的间距设置 Spacing inline elements
《CSS in Depth》新版封面
译者按
都说细节决定成败,这一点在 CSS 的页面实现中体现得淋漓尽致。见过太多的前端开发,明明用简单的 CSS 就能实现的效果,却剑走偏锋写了一堆 JavaScript 脚本。这种感觉就像医生看病一样,医术的高低不在于用了多少名贵药材,而在于能否对症下药。缝缝补补给自己挖坑也就算了,关键还害苦了后面接手的兄弟。好的 CSS 设计一定是用心迭代的结果,而细节处理的好坏又决定了迭代的次数与每次迭代的质量。
12.1.3 行内元素的间距设置 Spacing inline elements
设计稿中还有最后一处细节样式需要微调,即中间的内容栏展示的操作系统列表区域。示例应用 Ink 可以在这些操作系统中使用(如图 12.6 所示)。之前将每个列表项放到了一个无序列表元素(<ul>
)中,现在需要根据设计稿的要求将它们排成一行。
【图 12.6 列表项需要微调样式并在一行内展示】
这种微型布局的设计在一些标签类的内容展示上十分常见,例如博客文章的标签列表或商品类别等。本例之所以采用这样的设计方案,旨在带您了解几个您应该比较熟悉且感兴趣的小问题(quirks)。
这种布局有多种实现方案,Flexbox 弹性盒布局和行内元素是两种比较容易想到的。本书之前的章节已经介绍了不少有关 Flexbox 布局的知识,因此这里就重点考察一下采用行内元素时需要考虑哪些问题。
如果采用行内元素来实现上述效果,应该很容易想到一些样式。例如每个元素项都需要声明 display: inline
;各元素还需要设置一些内边距、背景色、圆角边框等等。一开始可能感觉只要有这些样式就够了,可一旦内容中出现换行的情况,问题便接踵而至:当视口宽度为某个固定值,或者后续列表项发生了变化,就可能会发生如图 12.7 所示的情况:
【图 12.7 多个列表项在换行时出现了重叠的情况】
每一行列表项的灰色背景会和另一行的列表项重叠,原因就在于行高。前面讲过,文本行的高度是由 字号 乘以 行高 决定的。如果为行内元素添加内边距,元素本身虽然也会变高,但不会增加文本行的高度。文本行的高度完全由行高决定。
要解决这个问题,就需要增加每个列表项的行高。代码清单 12.5 给出了标签列表模块对应的 CSS 代码。将它们同步更新到 modules
模块图层对应的样式表中。也可以尝试不同的行高,看看会产生什么样的效果。
译注
为方便对照,这里直接给出正文栏中间那栏的 HTML 标记:
<div class="tile"><h4>Take it with you</h4><p>Ink is available on a wide array of devices, so you can work fromanywhere:</p><ul class="tag-list"><li>Web</li><li>iOS</li><li>Android</li><li>Windows Phone</li></ul><a href="/supported-devices" class="button">Read more</a> </div>
代码清单 12.5 为标签添加样式
@layer modules {.tag-list {/* 覆盖用户代理默认的列表样式 */list-style: none;padding-inline-start: unset;}.tag-list > li {display: inline;padding: 0.3rem 0.5rem;font-size: 0.8rem;border-radius: 0.2rem;background-color: var(--light-gray);line-height: 2.6; /* 设置一个较大的行高,以便在换行时有足够的垂直空间 */}
}
值得一提的是,只有行内元素才具有这样的行为模式。如果一个元素是弹性子元素(或 inline-block,即行内块级元素),为了容纳它,其所在的行也会随之增高。当然页面仍需设置水平和垂直外边距来增加子元素间的间隔。借助行内元素的相关特性,就能通过元素间的天然空白来产生想要的间距。
注意
请注意页面中 “Windows Phone” 字样的子元素,它是可以换行的。如果换成弹性盒子或者行内块(inline block)中,则不允许像这样换行,整个元素都将换到下一行显示。如果不允许出现这样的情况,则需要根据实际情况选择最适合您的方式来解决这个问题。
这样我们就根据上一章给出的设计稿完成了整个页面的实现。本地页面的最终效果应该和图 12.8 中展示的视觉稿效果完全一致。
【图 12.8 完成页面设计后的效果】
我们花了很多时间来分析这些样式细节。很多开发者在实现页面设计时往往不太在意这些细节,但对于那些关注了细节的开发者来说,做到就相当于赚到。往往也正是这些细节道出了普通与优秀之间的本质差别。
在开发 CSS 样式时,建议大家多花些时间来完善设计细节。即便您做得没有设计师那么专业,也要相信自己的眼光。试着在这里多预留些空间,或者在那里少留一点,看看哪种效果更好。要舍得花时间来调试,但千万别滥用页面颜色,而是有选择地将颜色放在最需要吸引用户注意的位置。要创建一致的模式,然后打破这些规律的模式,这样才能将用户的注意力吸引到页面最重要的内容上。
译注
间距的微调就暂告一个段落了。下一节将介绍排版相关的知识,看看 CSS 近年来在字体方面都有哪些最新进展。
关于《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 精译_074】第 12 章 CSS 排版与间距概述 + 12.1 间距设置(下):行内元素的间距设置
当前内容所在位置(可进入专栏查看其他译好的章节内容) 第四部分 视觉增强技术 ✔️【第 12 章 CSS 排版与间距】 ✔️ 12.1 间距设置 12.1.1 使用 em 还是 px12.1.2 对行高的深入思考12.1.3 行内元素的间距设置 ✔️ 12.2 Web 字体12.3 谷歌字体 文章目…...
短视频矩阵抖音SEO源码OEM独立部署
短视频优化矩阵源码涉及对抖音平台上的视频内容进行筛选与排序,目的是增强其在搜索引擎中的可见度,以便更多用户能够浏览到这些视频。而抖音SEO优化系统则是通过构建一个分析框架,来解析抖音上的用户数据、视频信息及标签等元素,并…...
使用docker快速部署Nginx、Redis、MySQL、Tomcat以及制作镜像
文章目录 应用快速部署NginxRedisMySQLTomcat 制作镜像镜像原理基于已有容器创建使用 Dockerfile 创建镜像指令说明构建应用创建 Dockerfile 文件创建镜像 应用快速部署 Nginx docker run -d -p 80:80 nginx使用浏览器访问虚拟机地址 Redis docker pull redis docker run --…...
在ensp中ACL路由控制实验
一、实验目的 掌握ACL路由控制管理 二、实验要求 要求: 配置路由策略,左右两边不公开区域对方不可达,其他区域可以互相ping通 设备: 1、三台路由器 2、四台交换机 3、四台电脑 4、四台服务器 使用ensp搭建实验环境,如图所…...
μC/OS-Ⅱ源码学习(3)---事件模型
快速回顾 μC/OS-Ⅱ中的多任务 μC/OS-Ⅱ源码学习(1)---多任务系统的实现 μC/OS-Ⅱ源码学习(2)---多任务系统的实现(下) 本文开始,进入事件源码的学习。 事件模型 在一个多任务系统里,各个任务在系统的统筹下相继执行,由于执行速度极快&a…...
Jmeter进阶篇(30)深入探索 JMeter 监听器
前言 在性能测试领域里,Apache JMeter 是一款经典而强大的工具,而其中的监听器(Listeners)组件更是发挥着不可或缺的关键作用。 监听器就像敏锐的观察者,默默记录测试执行过程中的各种数据,作为系统性能分析的数据依据。 本文将带你全方位走进 JMeter 监听器的奇妙世界,…...
虚幻引擎的工程目录结构
虚幻引擎的工程目录结构如下: .idea/.vs:用于IDE(如IntelliJ IDEA或Visual Studio)的项目配置文件,包含工程设置和解决方案文件。 Binaries:存放编译后的可执行文件和相关的动态链接库(DLL&…...
深度学习中的yield
以下为例: def data_iter(batch_size, features, labels):num_examples len(features)indices list(range(num_examples))# 这些样本是随机读取的,没有特定的顺序random.shuffle(indices)for i in range(0, num_examples, batch_size):batch_indices …...
数据库数据恢复—ORACLE常见故障有哪些?如何恢复数据?
Oracle数据库常见故障表现: 1、ORACLE数据库无法启动或无法正常工作。 2、ORACLE ASM存储破坏。 3、ORACLE数据文件丢失。 4、ORACLE数据文件部分损坏。 5、ORACLE DUMP文件损坏。 Oracle数据库数据恢复方案: 1、检测存放数据库的服务器/存储设备是否存…...
使用JavaScrip和HTML搭建一个简单的博客网站系统
搭建一个简单的博客网站系统,我们需要创建几个基本的页面和功能:登录、注册、文章发布等。这里我们先实现一个基础版本,包括用户登录、注册以及文章发布的功能。由于这是一个简化版的示例,我们将所有逻辑集成在一个HTML文件中&…...
算法-字符串-76.最小覆盖子串
一、题目 二、思路解析 1.思路: 滑动窗口!!! 2.常用方法: 无 3.核心逻辑: 1.特殊情况:s或t是否为空字符串 if(snull||tnull)return ""; 2.声明一个字符数组——用于记录对应字符出现…...
Python爬虫之Selenium的应用
【1】Selenium基础介绍 1.什么是selenium? (1)Selenium是一个用于Web应用程序测试的工具。 (2)Selenium 测试直接运行在浏览器中,就像真正的用户在操作一样。 (3)支持通过各种driv…...
粉丝生产力与开源 AI 智能名片 2+1 链动模式商城小程序的融合创新与价值拓展
摘要:本文聚焦于粉丝生产力在当代文化与商业语境中的独特作用,并深入探讨其与开源 AI 智能名片 21 链动模式商城小程序的有机结合。通过剖析粉丝生产力的多元表现形式、内在驱动机制以及开源 AI 智能名片 21 链动模式商城小程序的功能特性与商业潜力&…...
红黑树(Red-Black Tree)
一、概念 红黑树(Red Black Tree)是一种自平衡的二叉搜索树,通过添加颜色信息来确保在进行插入和删除操作时,树的高度保持在对数级别,从而保证了查找、插入和删除操作的时间复杂度为 O(log n)。这种树可以很好地解决普…...
Cocos 资源加载(以Json为例)
resources 通常我们会把项目中需要动态加载的资源放在 resources 目录下,配合 resources.load 等接口动态加载。你只要传入相对 resources 的路径即可,并且路径的结尾处 不能 包含文件扩展名。 resources.load("Inf", JsonAsset, (error, ass…...
解决 IntelliJ IDEA 启动错误:插件冲突处理
引言 在使用 IntelliJ IDEA 进行开发时,我们可能会遇到各种启动错误。本文将详细介绍一种常见的错误:插件冲突,并提供解决方案。 错误背景 最近,有用户在启动 IntelliJ IDEA 时遇到了一个错误,提示信息为:…...
SQL——DQL分组聚合
分组聚合: 格式: select 聚合函数1(聚合的列),聚合函数2(聚合的列) from 表名 group by 标识列; ###若想方便分辨聚合后数据可在聚合函数前加上标识列(以标识列进行分组) 常见的聚合函数: sum(列名):求和函数 avg(列名)…...
Ripro V5日主题 v8.3 开心授权版 wordpress主题虚拟资源下载站首选主题模板
RiPro主题全新V5版本,是一个优秀且功能强大、易于管理、现代化的WordPress虚拟资源商城主题。支持首页模块化布局和WP原生小工具模块化首页可拖拽设置,让您的网站设计体验更加舒适。同时支持了高级筛选、自带会员生态系统、超全支付接口等众多功能&#…...
分布式搜索引擎之elasticsearch基本使用2
分布式搜索引擎之elasticsearch基本使用2 在分布式搜索引擎之elasticsearch基本使用1中,我们已经导入了大量数据到elasticsearch中,实现了elasticsearch的数据存储功能。但elasticsearch最擅长的还是搜索和数据分析。 所以j接下来,我们研究下…...
java学习-第十五章-IO流(java.io包中)
一、理解 1. 简单而言:流就是内存与存储设备之间传输数据的通道、管道。 2. 分类: (1) 按方向(以JVM虚拟机为参照物)【重点】 输入流:将中的内容读入到中。 输出流:将中的内容写入到中。 (2) 按单位: 字节流…...
企业如何实现数据从源端到消费端的全链路加工逻辑可视化?
要想实现数据加工链路的可视化,血缘图谱无疑是一个有效的工具。血缘图谱能够清晰地展示数据从产生、流转、加工到最终消费的每一个环节,帮助企业直观地理解数据之间的关联和依赖关系,轻松追溯数据来源和去向,并在数据出现问题时快…...
Toxicity of the Commons: Curating Open-Source Pre-Training Data
基本信息 📝 原文链接: https://arxiv.org/abs/2410.22587👥 作者: Catherine Arnett, Eliot Jones, Ivan P. Yamshchikov, Pierre-Carl Langlais🏷️ 关键词: toxicity filtering, language models, data curation📚 分类: 机器…...
Python 单例模式工厂模式和classmethod装饰器
前言: Python作为面向对象的语言,显然支持基本的设计模式。也具备面向对象的语言的基本封装方法:属性、方法、继承、多态等。但是,做为强大的和逐渐发展的语言,python也有很多高级的变种方法,以适应更多的…...
计算机键盘简史 | 键盘按键功能和指法
注:本篇为 “计算机键盘简史 | 键盘按键功能和指法” 相关文章合辑。 英文部分机翻未校。 The Evolution of Keyboards: From Typewriters to Tech Marvels 键盘的演变:从打字机到技术奇迹 Introduction 介绍 The keyboard has journeyed from a humb…...
【数字信号处理】期末综合实验,离散时间信号与系统的时域分析,离散信号 Z 变换,IIR 滤波器的设计与信号滤波,用窗函数法设计 FIR 数字滤波器
关注作者了解更多 我的其他CSDN专栏 过程控制系统 工程测试技术 虚拟仪器技术 可编程控制器 工业现场总线 数字图像处理 智能控制 传感器技术 嵌入式系统 复变函数与积分变换 单片机原理 线性代数 大学物理 热工与工程流体力学 数字信号处理 光电融合集成电路…...
面试技术点之安卓篇
一、基础 二、高级 三、组件 Android中SurfaceView和TextureView有什么区别? 参考 Android中SurfaceView和TextureView有什么区别? 四、三方框架 五、系统源码 六、性能优化...
Windows Terminal ssh到linux
1. windows store安装 Windows Terminal 2. 打开json文件配置 {"$help": "https://aka.ms/terminal-documentation","$schema": "https://aka.ms/terminal-profiles-schema","actions": [{"command": {"ac…...
自适应卡尔曼滤波(包括EKF、UKF、CKF等)的创新思路——该调什么、不该调什么
在调节自适应卡尔曼滤波时,需要注意的参数和矩阵都对滤波器的性能有直接影响。本文给出详细的说明,包括相关公式和 MATLAB 代码示例 文章目录 需要调节的参数1. **过程噪声协方差矩阵 Q Q Q**:2. **测量噪声协方差矩阵 R R R**:…...
SpringBoot项目监听端口接受数据(NIO版)
文章目录 前言服务端相关配置核心代码 客户端 前言 环境: JDK:64位 Jdk1.8 SpringBoot:2.1.7.RELEASE 功能: 使用Java中原生的NIO监听端口接受客户端的数据,并发送数据给客户端。 服务端 相关配置 application.ym…...
QT实战--带行号的支持高亮的编辑器实现(2)
本文主要介绍了第二种实现带行号的支持高亮的编辑器的方式,基于QTextEdit实现的,支持自定义边框,背景,颜色,以及滚动条样式,支持输入变色,复制文本到里面变色,支持替换,是一个纯专业项目使用的编辑器 先上效果图: 1.头文件ContentTextEdit.h #ifndef CONTENT_TEXT_…...
遵义在线/重庆镇海seo整站优化价格
框架可以简化操作,提高代码利用率,jdbc方式还有很多欠缺,因此不是框架所需要的,于是springjpa挺身而出,它不仅有springjdbc的集成性,而且具有简化sql,实现分页等等比较常用的功能。 其实现类似于…...
怎么用vs2015做网站/杭州seo网站建设
count 最简单的聚合工具,返回集合中的文档数量,速度非常快。 >db.coll.count() 计算查询条件为name是xiaozhe的总数,有条件的查询速度会变慢。 >db.coll.count({"name":"xiaozhe"}) distinct 用来找出给定键的所有…...
网站制作方法/网站seo置顶
2014年9月19日,阿里巴巴成功上市,成为美国史上IPO数额最大的公司,一夜间成为世界第二大互联网公司,其市值首日即超过美国最大电商亚马逊加EBay之和。 阿里巴巴路演IPO时每股估值不过68美元,而首日收盘价达到每股93.89…...
用手机怎么制作app软件/seo网络推广怎么做
一、元素背景是指哪些区域 默认情况下元素的背景是指元素border(包含border)以内的区域。 在CSS3中可用使用background-clip改变元素背景区域。 1.1 background-clip 指定背景在被应用元素上的绘制区域。元素盒模型包含content, padding, border, margi…...
适合设计师的网站/网络优化软件有哪些
一、问题引入如果服务提供者响应非常缓慢,那么消费者对提供者的请求就会被强制等待,直到提供者响应或超时。在高负载场景下,如果不作任何处理,此类问题可能会导致服务消费者的资源耗尽甚至整个系统的崩溃。1.1、雪崩效应微服务架构…...
做网站用win还是li/网站制作费用
从新记录一下自己经常要用到的模块,也是必写的模块。 mian.c #include <sys.h>void main() {InitSystem();while(1){KeyScans();Operate_key_val();DisplayBit(0,1);Led(1,0);BMR(0x50,1);} } sys.c #include <sys.h>void Select_74HC138(uchar cha…...