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

【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 in Depth》新版封面

译者按
都说细节决定成败,这一点在 CSS 的页面实现中体现得淋漓尽致。见过太多的前端开发,明明用简单的 CSS 就能实现的效果,却剑走偏锋写了一堆 JavaScript 脚本。这种感觉就像医生看病一样,医术的高低不在于用了多少名贵药材,而在于能否对症下药。缝缝补补给自己挖坑也就算了,关键还害苦了后面接手的兄弟。好的 CSS 设计一定是用心迭代的结果,而细节处理的好坏又决定了迭代的次数与每次迭代的质量。

12.1.3 行内元素的间距设置 Spacing inline elements

设计稿中还有最后一处细节样式需要微调,即中间的内容栏展示的操作系统列表区域。示例应用 Ink 可以在这些操作系统中使用(如图 12.6 所示)。之前将每个列表项放到了一个无序列表元素(<ul>)中,现在需要根据设计稿的要求将它们排成一行。

图 12.6 列表项需要微调样式并在一行内展示

【图 12.6 列表项需要微调样式并在一行内展示】

这种微型布局的设计在一些标签类的内容展示上十分常见,例如博客文章的标签列表或商品类别等。本例之所以采用这样的设计方案,旨在带您了解几个您应该比较熟悉且感兴趣的小问题(quirks)。

这种布局有多种实现方案,Flexbox 弹性盒布局和行内元素是两种比较容易想到的。本书之前的章节已经介绍了不少有关 Flexbox 布局的知识,因此这里就重点考察一下采用行内元素时需要考虑哪些问题。

如果采用行内元素来实现上述效果,应该很容易想到一些样式。例如每个元素项都需要声明 display: inline;各元素还需要设置一些内边距、背景色、圆角边框等等。一开始可能感觉只要有这些样式就够了,可一旦内容中出现换行的情况,问题便接踵而至:当视口宽度为某个固定值,或者后续列表项发生了变化,就可能会发生如图 12.7 所示的情况:

图 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 完成页面设计后的效果

【图 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 间距设置(下):行内元素的间距设置

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

短视频矩阵抖音SEO源码OEM独立部署

短视频优化矩阵源码涉及对抖音平台上的视频内容进行筛选与排序&#xff0c;目的是增强其在搜索引擎中的可见度&#xff0c;以便更多用户能够浏览到这些视频。而抖音SEO优化系统则是通过构建一个分析框架&#xff0c;来解析抖音上的用户数据、视频信息及标签等元素&#xff0c;并…...

使用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路由控制管理 二、实验要求 要求&#xff1a; 配置路由策略&#xff0c;左右两边不公开区域对方不可达&#xff0c;其他区域可以互相ping通 设备&#xff1a; 1、三台路由器 2、四台交换机 3、四台电脑 4、四台服务器 使用ensp搭建实验环境,如图所…...

μC/OS-Ⅱ源码学习(3)---事件模型

快速回顾 μC/OS-Ⅱ中的多任务 μC/OS-Ⅱ源码学习(1)---多任务系统的实现 μC/OS-Ⅱ源码学习(2)---多任务系统的实现(下) 本文开始&#xff0c;进入事件源码的学习。 事件模型 在一个多任务系统里&#xff0c;各个任务在系统的统筹下相继执行&#xff0c;由于执行速度极快&a…...

Jmeter进阶篇(30)深入探索 JMeter 监听器

前言 在性能测试领域里,Apache JMeter 是一款经典而强大的工具,而其中的监听器(Listeners)组件更是发挥着不可或缺的关键作用。 监听器就像敏锐的观察者,默默记录测试执行过程中的各种数据,作为系统性能分析的数据依据。 本文将带你全方位走进 JMeter 监听器的奇妙世界,…...

虚幻引擎的工程目录结构

虚幻引擎的工程目录结构如下&#xff1a; .idea/.vs&#xff1a;用于IDE&#xff08;如IntelliJ IDEA或Visual Studio&#xff09;的项目配置文件&#xff0c;包含工程设置和解决方案文件。 Binaries&#xff1a;存放编译后的可执行文件和相关的动态链接库&#xff08;DLL&…...

深度学习中的yield

以下为例&#xff1a; def data_iter(batch_size, features, labels):num_examples len(features)indices list(range(num_examples))# 这些样本是随机读取的&#xff0c;没有特定的顺序random.shuffle(indices)for i in range(0, num_examples, batch_size):batch_indices …...

数据库数据恢复—ORACLE常见故障有哪些?如何恢复数据?

Oracle数据库常见故障表现&#xff1a; 1、ORACLE数据库无法启动或无法正常工作。 2、ORACLE ASM存储破坏。 3、ORACLE数据文件丢失。 4、ORACLE数据文件部分损坏。 5、ORACLE DUMP文件损坏。 Oracle数据库数据恢复方案&#xff1a; 1、检测存放数据库的服务器/存储设备是否存…...

使用JavaScrip和HTML搭建一个简单的博客网站系统

搭建一个简单的博客网站系统&#xff0c;我们需要创建几个基本的页面和功能&#xff1a;登录、注册、文章发布等。这里我们先实现一个基础版本&#xff0c;包括用户登录、注册以及文章发布的功能。由于这是一个简化版的示例&#xff0c;我们将所有逻辑集成在一个HTML文件中&…...

算法-字符串-76.最小覆盖子串

一、题目 二、思路解析 1.思路&#xff1a; 滑动窗口&#xff01;&#xff01;&#xff01; 2.常用方法&#xff1a; 无 3.核心逻辑&#xff1a; 1.特殊情况&#xff1a;s或t是否为空字符串 if(snull||tnull)return ""; 2.声明一个字符数组——用于记录对应字符出现…...

Python爬虫之Selenium的应用

【1】Selenium基础介绍 1.什么是selenium&#xff1f; &#xff08;1&#xff09;Selenium是一个用于Web应用程序测试的工具。 &#xff08;2&#xff09;Selenium 测试直接运行在浏览器中&#xff0c;就像真正的用户在操作一样。 &#xff08;3&#xff09;支持通过各种driv…...

粉丝生产力与开源 AI 智能名片 2+1 链动模式商城小程序的融合创新与价值拓展

摘要&#xff1a;本文聚焦于粉丝生产力在当代文化与商业语境中的独特作用&#xff0c;并深入探讨其与开源 AI 智能名片 21 链动模式商城小程序的有机结合。通过剖析粉丝生产力的多元表现形式、内在驱动机制以及开源 AI 智能名片 21 链动模式商城小程序的功能特性与商业潜力&…...

红黑树(Red-Black Tree)

一、概念 红黑树&#xff08;Red Black Tree&#xff09;是一种自平衡的二叉搜索树&#xff0c;通过添加颜色信息来确保在进行插入和删除操作时&#xff0c;树的高度保持在对数级别&#xff0c;从而保证了查找、插入和删除操作的时间复杂度为 O(log n)。这种树可以很好地解决普…...

Cocos 资源加载(以Json为例)

resources 通常我们会把项目中需要动态加载的资源放在 resources 目录下&#xff0c;配合 resources.load 等接口动态加载。你只要传入相对 resources 的路径即可&#xff0c;并且路径的结尾处 不能 包含文件扩展名。 resources.load("Inf", JsonAsset, (error, ass…...

解决 IntelliJ IDEA 启动错误:插件冲突处理

引言 在使用 IntelliJ IDEA 进行开发时&#xff0c;我们可能会遇到各种启动错误。本文将详细介绍一种常见的错误&#xff1a;插件冲突&#xff0c;并提供解决方案。 错误背景 最近&#xff0c;有用户在启动 IntelliJ IDEA 时遇到了一个错误&#xff0c;提示信息为&#xff1a…...

SQL——DQL分组聚合

分组聚合&#xff1a; 格式&#xff1a; select 聚合函数1(聚合的列),聚合函数2(聚合的列) from 表名 group by 标识列; ###若想方便分辨聚合后数据可在聚合函数前加上标识列&#xff08;以标识列进行分组&#xff09; 常见的聚合函数: sum(列名):求和函数 avg(列名)…...

Ripro V5日主题 v8.3 开心授权版 wordpress主题虚拟资源下载站首选主题模板

RiPro主题全新V5版本&#xff0c;是一个优秀且功能强大、易于管理、现代化的WordPress虚拟资源商城主题。支持首页模块化布局和WP原生小工具模块化首页可拖拽设置&#xff0c;让您的网站设计体验更加舒适。同时支持了高级筛选、自带会员生态系统、超全支付接口等众多功能&#…...

分布式搜索引擎之elasticsearch基本使用2

分布式搜索引擎之elasticsearch基本使用2 在分布式搜索引擎之elasticsearch基本使用1中&#xff0c;我们已经导入了大量数据到elasticsearch中&#xff0c;实现了elasticsearch的数据存储功能。但elasticsearch最擅长的还是搜索和数据分析。 所以j接下来&#xff0c;我们研究下…...

java学习-第十五章-IO流(java.io包中)

一、理解 1. 简单而言&#xff1a;流就是内存与存储设备之间传输数据的通道、管道。 2. 分类&#xff1a; (1) 按方向(以JVM虚拟机为参照物)【重点】 输入流&#xff1a;将中的内容读入到中。 输出流&#xff1a;将中的内容写入到中。 (2) 按单位&#xff1a; 字节流&#xf…...

企业如何实现数据从源端到消费端的全链路加工逻辑可视化?

要想实现数据加工链路的可视化&#xff0c;血缘图谱无疑是一个有效的工具。血缘图谱能够清晰地展示数据从产生、流转、加工到最终消费的每一个环节&#xff0c;帮助企业直观地理解数据之间的关联和依赖关系&#xff0c;轻松追溯数据来源和去向&#xff0c;并在数据出现问题时快…...

Toxicity of the Commons: Curating Open-Source Pre-Training Data

基本信息 &#x1f4dd; 原文链接: https://arxiv.org/abs/2410.22587&#x1f465; 作者: Catherine Arnett, Eliot Jones, Ivan P. Yamshchikov, Pierre-Carl Langlais&#x1f3f7;️ 关键词: toxicity filtering, language models, data curation&#x1f4da; 分类: 机器…...

Python 单例模式工厂模式和classmethod装饰器

前言&#xff1a; Python作为面向对象的语言&#xff0c;显然支持基本的设计模式。也具备面向对象的语言的基本封装方法&#xff1a;属性、方法、继承、多态等。但是&#xff0c;做为强大的和逐渐发展的语言&#xff0c;python也有很多高级的变种方法&#xff0c;以适应更多的…...

计算机键盘简史 | 键盘按键功能和指法

注&#xff1a;本篇为 “计算机键盘简史 | 键盘按键功能和指法” 相关文章合辑。 英文部分机翻未校。 The Evolution of Keyboards: From Typewriters to Tech Marvels 键盘的演变&#xff1a;从打字机到技术奇迹 Introduction 介绍 The keyboard has journeyed from a humb…...

【数字信号处理】期末综合实验,离散时间信号与系统的时域分析,离散信号 Z 变换,IIR 滤波器的设计与信号滤波,用窗函数法设计 FIR 数字滤波器

关注作者了解更多 我的其他CSDN专栏 过程控制系统 工程测试技术 虚拟仪器技术 可编程控制器 工业现场总线 数字图像处理 智能控制 传感器技术 嵌入式系统 复变函数与积分变换 单片机原理 线性代数 大学物理 热工与工程流体力学 数字信号处理 光电融合集成电路…...

面试技术点之安卓篇

一、基础 二、高级 三、组件 Android中SurfaceView和TextureView有什么区别&#xff1f; 参考 Android中SurfaceView和TextureView有什么区别&#xff1f; 四、三方框架 五、系统源码 六、性能优化...

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等)的创新思路——该调什么、不该调什么

在调节自适应卡尔曼滤波时&#xff0c;需要注意的参数和矩阵都对滤波器的性能有直接影响。本文给出详细的说明&#xff0c;包括相关公式和 MATLAB 代码示例 文章目录 需要调节的参数1. **过程噪声协方差矩阵 Q Q Q**&#xff1a;2. **测量噪声协方差矩阵 R R R**&#xff1a;…...

SpringBoot项目监听端口接受数据(NIO版)

文章目录 前言服务端相关配置核心代码 客户端 前言 环境&#xff1a; JDK&#xff1a;64位 Jdk1.8 SpringBoot&#xff1a;2.1.7.RELEASE 功能&#xff1a; 使用Java中原生的NIO监听端口接受客户端的数据&#xff0c;并发送数据给客户端。 服务端 相关配置 application.ym…...

QT实战--带行号的支持高亮的编辑器实现(2)

本文主要介绍了第二种实现带行号的支持高亮的编辑器的方式,基于QTextEdit实现的,支持自定义边框,背景,颜色,以及滚动条样式,支持输入变色,复制文本到里面变色,支持替换,是一个纯专业项目使用的编辑器 先上效果图: 1.头文件ContentTextEdit.h #ifndef CONTENT_TEXT_…...

遵义在线/重庆镇海seo整站优化价格

框架可以简化操作&#xff0c;提高代码利用率&#xff0c;jdbc方式还有很多欠缺&#xff0c;因此不是框架所需要的&#xff0c;于是springjpa挺身而出&#xff0c;它不仅有springjdbc的集成性&#xff0c;而且具有简化sql&#xff0c;实现分页等等比较常用的功能。 其实现类似于…...

怎么用vs2015做网站/杭州seo网站建设

count 最简单的聚合工具&#xff0c;返回集合中的文档数量&#xff0c;速度非常快。 >db.coll.count() 计算查询条件为name是xiaozhe的总数&#xff0c;有条件的查询速度会变慢。 >db.coll.count({"name":"xiaozhe"}) distinct 用来找出给定键的所有…...

网站制作方法/网站seo置顶

2014年9月19日&#xff0c;阿里巴巴成功上市&#xff0c;成为美国史上IPO数额最大的公司&#xff0c;一夜间成为世界第二大互联网公司&#xff0c;其市值首日即超过美国最大电商亚马逊加EBay之和。 阿里巴巴路演IPO时每股估值不过68美元&#xff0c;而首日收盘价达到每股93.89…...

用手机怎么制作app软件/seo网络推广怎么做

一、元素背景是指哪些区域 默认情况下元素的背景是指元素border&#xff08;包含border&#xff09;以内的区域。 在CSS3中可用使用background-clip改变元素背景区域。 1.1 background-clip 指定背景在被应用元素上的绘制区域。元素盒模型包含content, padding, border, margi…...

适合设计师的网站/网络优化软件有哪些

一、问题引入如果服务提供者响应非常缓慢&#xff0c;那么消费者对提供者的请求就会被强制等待&#xff0c;直到提供者响应或超时。在高负载场景下&#xff0c;如果不作任何处理&#xff0c;此类问题可能会导致服务消费者的资源耗尽甚至整个系统的崩溃。1.1、雪崩效应微服务架构…...

做网站用win还是li/网站制作费用

从新记录一下自己经常要用到的模块&#xff0c;也是必写的模块。 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…...