标签： intrinsic

发布于

Intrinsic String Manipulation Types：`Uppercase`, `Lowercase`, `Capitalize` 的编译器内部实现

技术讲座：Intrinsic String Manipulation Types：Uppercase, Lowercase, Capitalize 的编译器内部实现 引言 字符串操作是编程中常见的需求，特别是在处理用户输入或文件内容时。在多种编程语言中，字符串的转换操作如大写、小写和首字母大写等，被封装成了内置函数或方法。本文将深入探讨这些操作的编译器内部实现，分析其原理，并通过代码示例展示如何在不同的编程语言中实现这些功能。 1. 字符串操作概述 在编程中，字符串操作通常包括以下几种： Uppercase: 将字符串中的所有字符转换为大写。 Lowercase: 将字符串中的所有字符转换为小写。 Capitalize: 将字符串中的首字母转换为大写，其余字母转换为小写。 这些操作在多种编程语言中都有对应的内置函数或方法。 2. 编译器内部实现原理 2.1 字符编码 在讨论字符串操作之前，我们需要了解字符编码。不同的字符编码方式（如ASCII、UTF-8等）会影响字符串操作的结果。例如，在某些编码中，某些字符可能没有大小写之分。 2.2 字符转换 字符串操作的核心在于字符的转换。以下是 …

继续阅读“Intrinsic String Manipulation Types：`Uppercase`, `Lowercase`, `Capitalize` 的编译器内部实现”

发布于

CSS `Intrinsic Sizing` (`min-content`, `max-content`, `fit-content`) 结合 `Grid` / `Flex`

各位观众，各位朋友，大家好！我是你们的老朋友，今天咱们来聊聊 CSS 里的“内功心法”——Intrinsic Sizing，也就是min-content、max-content、fit-content这几个哥们儿，再看看它们和 Grid、Flexbox 这两位大侠是怎么配合的。 说起 CSS 布局，大家可能最先想到的是什么 float、position，后来又有了 Flexbox 和 Grid，简直是翻天覆地的变化。但是，光有这些“外功”还不够，想要真正玩转布局，还得掌握一些“内功”，也就是内容本身的尺寸特性。 一、什么是 Intrinsic Sizing？ 简单来说，Intrinsic Sizing 就是元素尺寸由其内容决定的特性。它不像我们平时用 width: 100px 这样直接指定尺寸，而是让元素根据内容“自由发挥”。这就好比练武，外功是招式，内功是真气，没有真气，招式再花哨也使不出来。 CSS 提供了三个关键词来控制这种“自由发挥”的程度： min-content: 元素宽度尽可能小，但又不能让内容溢出。通常情况下，它会尽可能地将内容折行（如果是文本），或者让图片缩小到最小尺 …

继续阅读“CSS `Intrinsic Sizing` (`min-content`, `max-content`, `fit-content`) 结合 `Grid` / `Flex`”

发布于

CSS `Intrinsic Sizing` (固有尺寸) (`max-content`, `min-content`, `fit-content`) 应用

各位前端的弄潮儿们，大家好！今天咱们来聊聊CSS世界里三个有点“个性”，但又非常实用的家伙：max-content，min-content，以及fit-content。它们合起来，我们称之为“Intrinsic Sizing”（固有尺寸）。 这三个小伙伴，主要影响的是元素的宽度和高度（当然，高度用的相对少一些）。它们的作用，简单来说，就是让元素的大小不再完全依赖于父元素或你设定的固定值，而是根据自身的内容来“决定命运”。听起来是不是有点玄乎？别急，咱们慢慢解开它们的神秘面纱。 Part 1: max-content——“我要撑爆一切！” 首先，我们来认识一下max-content。这家伙，心里只有一件事，那就是尽可能地展示所有内容，不惜撑爆一切！它会计算出元素在不换行（或不截断，如果设置了overflow: hidden）的情况下，能够容纳所有内容的最小宽度。 举个例子： <div class=”container”> <div class=”content” style=”width: max-content;”> This is a very long te …

继续阅读“CSS `Intrinsic Sizing` (固有尺寸) (`max-content`, `min-content`, `fit-content`) 应用”

发布于

**CSS** `contain-intrinsic-size`：为动态内容预留空间，避免布局跳动

告别“布局跳跳糖”：contain-intrinsic-size，你布局的定海神针 你有没有遇到过这样的糟心事儿？网页加载时，文字还没渲染出来，图片还在路上，整个页面就像一个正在搭积木的小孩，一会儿高一会儿矮，布局乱得像被熊孩子蹂躏过的玩具堆？这，就是布局跳动，专业术语叫CLS（Cumulative Layout Shift），用户体验的头号公敌。 想象一下，你正兴致勃勃地浏览一篇美食攻略，刚准备点开一家看起来超诱人的餐厅链接，结果页面突然向下猛地一跳，你点到了广告！心中的一万只草泥马奔腾而过… 这滋味，谁懂？ 罪魁祸首往往是那些动态内容，比如图片、视频、iframe，甚至是字体加载。它们在加载完成之前，浏览器并不知道它们的确切尺寸，于是只能先按兵不动，等内容加载完毕，才“恍然大悟”地重新调整布局。这一调整，就导致了布局跳动。 别慌！今天，我们要介绍一位重量级选手，专门来拯救你于水火之中，它就是CSS属性 contain-intrinsic-size。这家伙就像一个“预言家”，能提前告诉浏览器，某个元素将来会占据多大的空间，让浏览器提前做好准备，避免布局跳动。 contai …

继续阅读“**CSS** `contain-intrinsic-size`：为动态内容预留空间，避免布局跳动”