登录注册

CSS 代码片段可以设置块容器不跟随字号缩放吗？

本贴最后更新于 297 天前，其中的信息可能已经事过境迁

这段代码中，一改字号，容器外框就跟随字号缩放，有没有办法不这样：


.fn__code, .b3-typography code:not(.hljs),
.b3-typography span[data-type~=code],
.protyle-wysiwyg code:not(.hljs),
.protyle-wysiwyg span[data-type~=code] {
    padding: 0;
    font-size: 100%;
    font-family: var(--b3-font-family-protyle);
    border-radius: 3px;
}

思源笔记

思源笔记是一款隐私优先的个人知识管理系统，支持完全离线使用，同时也支持端到端加密同步。

融合块、大纲和双向链接，重构你的思维。
26518 引用 • 110295 回帖 • 2 关注

2 操作

xnyshu 在 2024-10-03 17:05:44 置顶了该帖

xnyshu 在 2024-10-02 09:43:02 置顶了该帖

xnyshu 9 个月前 via macOS 武汉位置

1 收藏

2 操作

1 回帖

146 56 2 49 39

欢迎来到这里！

我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。

注册关于

请输入回帖内容 ...

xnyshu • 9 个月前 via macOS
支持者捐赠者作者
以下是 DeepSeek 给的办法，我不知道怎么做：

在一个可以自由缩放的编辑页面中，确保容器的上下边框与左右临近的容器对齐可能会更具挑战性，因为缩放会影响布局的精确性。以下是一些针对这种情况的建议和方法：

1. 使用 Flexbox 布局

Flexbox 是一个强大的布局工具，即使在缩放的情况下也能保持相对较好的对齐效果。
```
.parent-container {
    display: flex;
    justify-content: space-between; /* 子容器之间的间距 */
}
.child-container {
    flex: 1; /* 使子容器均匀分布 */
    border: 1px solid black; /* 示例边框 */
}
```
2. 使用 Grid 布局

Grid 布局提供了更精细的控制，适合复杂的布局需求。
```
.parent-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* 自适应列宽 */
    gap: 10px; /* 子容器之间的间距 */
}
.child-container {
    border: 1px solid black; /* 示例边框 */
}
```
3. 使用 display: table 和 display: table-cell

表格布局在缩放时也能保持较好的对齐效果。
```
.parent-container {
    display: table;
    width: 100%;
    table-layout: fixed; /* 固定表格布局 */
}
.child-container {
    display: table-cell;
    border: 1px solid black; /* 示例边框 */
}
```
4. 使用 box-sizing: border-box;

确保边框和内边距不会影响容器的宽度，这在缩放时尤为重要。
```
.child-container {
    box-sizing: border-box;
    border: 1px solid black; /* 示例边框 */
}
```
5. 使用 calc() 函数

在某些情况下，可以使用 calc() 函数来动态计算容器的宽度，以确保对齐。
```
.child-container {
    width: calc(50% - 10px); /* 假设有两个子容器，每个占50%宽度，减去间距 */
    border: 1px solid black; /* 示例边框 */
}
```
6. 使用 position: relative 和 position: absolute

在某些情况下，可以使用相对定位和绝对定位来精确控制位置。
```
.parent-container {
    position: relative;
}
.child-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid black; /* 示例边框 */
}
```
7. 使用 transform 进行微调

在某些情况下，可以使用 transform 进行微调，以确保对齐。
```
.child-container {
    border: 1px solid black; /* 示例边框 */
    transform: translate(0, -1px); /* 微调位置 */
}
```
总结
- Flexbox 和 Grid 布局是最现代且推荐的方法，因为它们提供了强大的对齐和布局控制能力。
- 表格布局 和 浮动布局 是传统的方法，但在某些情况下仍然有效。
- 绝对定位 适用于需要精确控制位置的场景。
- box-sizing: border-box; 和 calc() 函数可以帮助你在缩放时保持布局的稳定性。
根据你的具体需求和浏览器兼容性要求，选择合适的方法来实现容器的对齐。在自由缩放的编辑页面中，Flexbox 和 Grid 布局通常是最可靠的选择。

xnyshu

武汉

回帖

488

帖子

187

积分

172

近期热议

推荐标签标签

倾城之链

23 引用 • 66 回帖 • 167 关注
周末

星期六到星期天晚，实行五天工作制后，指每周的最后两天。再过几年可能就是三天了。
14 引用 • 297 回帖 • 1 关注
Hadoop

Hadoop 是由 Apache 基金会所开发的一个分布式系统基础架构。用户可以在不了解分布式底层细节的情况下，开发分布式程序。充分利用集群的威力进行高速运算和存储。
93 引用 • 122 回帖 • 613 关注
链书

链书（Chainbook）是 B3log 开源社区提供的区块链纸质书交易平台，通过 B3T 实现共享激励与价值链。可将你的闲置书籍上架到链书，我们共同构建这个全新的交易平台，让闲置书籍继续发挥它的价值。

链书目前已经下线，也许以后还有计划重制上线。
14 引用 • 257 回帖 • 1 关注
frp

frp 是一个可用于内网穿透的高性能的反向代理应用，支持 TCP、UDP、 HTTP 和 HTTPS 协议。
17 引用 • 7 回帖 • 4 关注
996

“工作 996，生病 ICU”
13 引用 • 200 回帖 • 3 关注
浅吟主题

Jeffrey Chen 制作的思源笔记主题，项目仓库：https://github.com/TCOTC/Whisper
1 引用 • 31 回帖
Google

Google（Google Inc.，NASDAQ：GOOG）是一家美国上市公司（公有股份公司），于 1998 年 9 月 7 日以私有股份公司的形式创立，设计并管理一个互联网搜索引擎。Google 公司的总部称作“Googleplex”，它位于加利福尼亚山景城。Google 目前被公认为是全球规模最大的搜索引擎，它提供了简单易用的免费服务。不作恶（Don't be evil）是谷歌公司的一项非正式的公司口号。
49 引用 • 192 回帖
链滴

链滴是一个记录生活的地方。

记录生活，连接点滴

184 引用 • 3903 回帖
设计模式

设计模式（Design pattern）代表了最佳的实践，通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。
201 引用 • 120 回帖
宕机

宕机，多指一些网站、游戏、网络应用等服务器一种区别于正常运行的状态，也叫“Down 机”、“当机”或“死机”。宕机状态不仅仅是指服务器“挂掉了”、“死机了”状态，也包括服务器假死、停用、关闭等一些原因而导致出现的不能够正常运行的状态。
13 引用 • 82 回帖 • 75 关注
Thymeleaf

Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。类似 Velocity、 FreeMarker 等，它也可以轻易的与 Spring 等 Web 框架进行集成作为 Web 应用的模板引擎。与其它模板引擎相比，Thymeleaf 最大的特点是能够直接在浏览器中打开并正确显示模板页面，而不需要启动整个 Web 应用。
11 引用 • 19 回帖 • 399 关注
禅道

禅道是一款国产的开源项目管理软件，她的核心管理思想基于敏捷方法 scrum，内置了产品管理和项目管理，同时又根据国内研发现状补充了测试管理、计划管理、发布管理、文档管理、事务管理等功能，在一个软件中就可以将软件研发中的需求、任务、bug、用例、计划、发布等要素有序的跟踪管理起来，完整地覆盖了项目管理的核心流程。
10 引用 • 15 回帖
ActiveMQ

ActiveMQ 是 Apache 旗下的一款开源消息总线系统，它完整实现了 JMS 规范，是一个企业级的消息中间件。
19 引用 • 13 回帖 • 685 关注
Dubbo

Dubbo 是一个分布式服务框架，致力于提供高性能和透明化的 RPC 远程服务调用方案，是 [阿里巴巴] SOA 服务化治理方案的核心框架，每天为 2,000+ 个服务提供 3,000,000,000+ 次访问量支持，并被广泛应用于阿里巴巴集团的各成员站点。
60 引用 • 82 回帖 • 617 关注
jQuery

jQuery 是一套跨浏览器的 JavaScript 库，强化 HTML 与 JavaScript 之间的操作。由 John Resig 在 2006 年 1 月的 BarCamp NYC 上释出第一个版本。全球约有 28% 的网站使用 jQuery，是非常受欢迎的 JavaScript 库。
63 引用 • 134 回帖 • 737 关注
Hibernate

Hibernate 是一个开放源代码的对象关系映射框架，它对 JDBC 进行了非常轻量级的对象封装，使得 Java 程序员可以随心所欲的使用对象编程思维来操纵数据库。
39 引用 • 103 回帖 • 726 关注
PWL
组织简介

用爱发电 (Programming With Love) 是一个以开源精神为核心的民间开源爱好者技术组织，“用爱发电”象征开源与贡献精神，加入组织，代表你将遵守组织的“个人开源爱好者”的各项条款。申请加入：用爱发电组织邀请帖。
用爱发电组织官网：https://programmingwithlove.stackoverflow.wiki/

用爱发电组织的核心驱动力：
- 遵守开源守则，体现开源&贡献精神：以分享为目的，拒绝非法牟利。
- 自我保护：使用适当的 License 保护自己的原创作品。
- 尊重他人：不以各种理由、各种漏洞进行未经允许的抄袭、散播、洩露；以礼相待，尊重所有对社区做出贡献的开发者；通过他人的分享习得知识，要留下足迹，表示感谢。
- 热爱编程、热爱学习：加入组织，热爱编程是首当其要的。我们欢迎热爱讨论、分享、提问的朋友，也同样欢迎默默成就的朋友。
- 倾听：正确并恳切对待、处理问题与建议，及时修复开源项目的 Bug ，及时与反馈者沟通。不抬杠、不无视、不辱骂。
- 平视：不诋毁、轻视、嘲讽其他开发者，主动提出建议、施以帮助，以和谐为本。只要他人肯努力，你也可能会被昔日小看的人所超越，所以请保持谦虚。
- 乐观且活跃：你的努力决定了你的高度。不要放弃，多年后回头俯瞰，才会发现自己已经成就往日所仰望的水平。积极地将项目开源，帮助他人学习、改进，自己也会获得相应的提升、成就与成就感。
1 引用 • 487 回帖 • 1 关注
阿里巴巴

阿里巴巴网络技术有限公司（简称：阿里巴巴集团）是以曾担任英语教师的马云为首的 18 人，于 1999 年在中国杭州创立，他们相信互联网能够创造公平的竞争环境，让小企业通过创新与科技扩展业务，并在参与国内或全球市场竞争时处于更有利的位置。
43 引用 • 221 回帖 • 45 关注
Laravel

Laravel 是一套简洁、优雅的 PHP Web 开发框架。它采用 MVC 设计，是一款崇尚开发效率的全栈框架。
19 引用 • 23 回帖 • 742 关注
OpenStack

OpenStack 是一个云操作系统，通过数据中心可控制大型的计算、存储、网络等资源池。所有的管理通过前端界面管理员就可以完成，同样也可以通过 Web 接口让最终用户部署资源。
10 引用 • 2 关注
OpenCV

15 引用 • 36 回帖
Flutter

Flutter 是谷歌的移动 UI 框架，可以快速在 iOS 和 Android 上构建高质量的原生用户界面。 Flutter 可以与现有的代码一起工作，它正在被越来越多的开发者和组织使用，并且 Flutter 是完全免费、开源的。
39 引用 • 92 回帖 • 13 关注
Jenkins

Jenkins 是一套开源的持续集成工具。它提供了非常丰富的插件，让构建、部署、自动化集成项目变得简单易用。
54 引用 • 37 回帖 • 2 关注
正则表达式

正则表达式（Regular Expression）使用单个字符串来描述、匹配一系列遵循某个句法规则的字符串。
31 引用 • 94 回帖 • 1 关注
微软

微软是一家美国跨国科技公司，也是世界 PC 软件开发的先导，由比尔·盖茨与保罗·艾伦创办于 1975 年，公司总部设立在华盛顿州的雷德蒙德（Redmond，邻近西雅图）。以研发、制造、授权和提供广泛的电脑软件服务业务为主。
8 引用 • 44 回帖
Bootstrap

Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发，是一个 CSS / HTML 框架。
18 引用 • 33 回帖 • 649 关注

CSS 代码片段可以设置块容器不跟随字号缩放吗？

相关帖子

[js] 斜杠菜单把指定挂件或模板添加到外层

思源笔记启动卡死

分享：文档树过长时，如何拖动排序

我想修改制作闪卡后左边框的颜色

思源笔记 v3.2.1 无法上传本地文件

缩小左右边距

悬赏 500 积分，解决手机思源超链接，每次打开都重载的问题

欢迎来到这里！

1. 使用 Flexbox 布局

2. 使用 Grid 布局

3. 使用 `display: table` 和 `display: table-cell`

4. 使用 `box-sizing: border-box;`

5. 使用 `calc()` 函数

6. 使用 `position: relative` 和 `position: absolute`

7. 使用 `transform` 进行微调

总结

近期热议

推荐标签标签

组织简介

用爱发电组织的核心驱动力：

最新标签

CSS 代码片段可以设置块容器不跟随字号缩放吗？

相关帖子

[js] 斜杠菜单把指定挂件或模板添加到外层

思源笔记启动卡死

分享：文档树过长时，如何拖动排序

我想修改制作闪卡后左边框的颜色

思源笔记 v3.2.1 无法上传本地文件

缩小左右边距

悬赏 500 积分，解决手机思源超链接，每次打开都重载的问题

欢迎来到这里！

1. 使用 Flexbox 布局

2. 使用 Grid 布局

3. 使用 display: table 和 display: table-cell

4. 使用 box-sizing: border-box;

5. 使用 calc() 函数

6. 使用 position: relative 和 position: absolute

7. 使用 transform 进行微调

总结

近期热议

推荐标签 标签

组织简介

用爱发电组织的核心驱动力：

最新标签

3. 使用 `display: table` 和 `display: table-cell`

4. 使用 `box-sizing: border-box;`

5. 使用 `calc()` 函数

6. 使用 `position: relative` 和 `position: absolute`

7. 使用 `transform` 进行微调

推荐标签标签