CSS - 测量单位

你好，未来的网页设计师们！今天，我们将踏上一段激动人心的旅程，探索CSS测量单位的世界。作为你友好的邻居电脑老师，我在这里指导你了解这个网页设计的基本方面。所以，拿起你的虚拟尺子，让我们来测量一些CSS吧！

CSS - Measurement Units

长度单位

在CSS中，我们有多种方式来测量和定义大小。这就像拥有一个装满不同尺子的工具箱，每个都适合特定的任务。让我们从基础开始：

这些是很直接的单位，就像你尺子上的英寸：

这里有一个简单的例子：

.box {
width: 100px;
height: 2in;
margin: 10mm;
}

在这段代码中，我们创建了一个宽100像素、高2英寸、四周边距为10毫米的盒子。这就像建造一个微小的、精确的纸箱！

现在，让我们来谈谈 'em' 单位。它是一个相对单位，基于元素的字体大小。把它想象成一个根据周围环境改变大小的变色龙。

.parent {
font-size: 16px;
}

.child {
font-size: 1.5em; /* 这将是 24px */
padding: 2em;     /* 这将是 48px */
}

在这个例子中，子元素的字体大小是父元素的1.5倍，它的内边距是它自己字体大小的两倍。这就像一个大小递变的俄罗斯套娃！

'ch' 单位基于 '0'（零）字符的宽度。它在创建等宽字体列布局时特别有用。

.code-block {
width: 80ch;
font-family: monospace;
}

这创建了一个宽80个字符的代码块，对于那些怀念80列终端的日子的人来说，这是完美的！

'rem' 代表 "根 em"。它与 'em' 类似，但总是相对于根元素（通常是 <html>），而不是父元素。

html {
font-size: 16px;
}

.box {
font-size: 1.5rem; /* 总是 24px，不管父元素 */
padding: 2rem;     /* 总是 32px */
}

这对于在文档中保持一致的尺寸非常棒，就像为你的整个网站拥有一份主蓝图。

'lh' 代表元素的 "行高"，而 'rlh' 是 "根行高"。这些是较新的单位，非常适合排版中的垂直节奏。

.paragraph {
line-height: 1.5;
margin-bottom: 1lh;
}

这设置了段落下方的边距正好是行高，创建了一个和谐的垂直节奏。这就像指挥一个文本的交响乐团！

'vh' 和 'vw' 分别代表 "视窗高度" 和 "视窗宽度"。它们是基于视窗大小的百分比单位。

.hero {
height: 100vh;
width: 100vw;
}

这创建了一个始终填满整个屏幕的英雄部分，无论设备大小如何。这就像拥有一个总是完美适配的响应式广告牌！

这些单位基于视窗的较小或较大尺寸，视情况而定。

.square {
width: 50vmin;
height: 50vmin;
}

这创建了一个完美的正方形，始终是较小视窗尺寸的一半。这就像拥有一个总是保持比例的变形正方形！

'vb' 代表 "视窗块大小"。它与 'vh' 类似，但它尊重文档的书写模式。

.sidebar {
width: 20vb;
}

这创建了一个侧边栏，始终是视窗块尺寸的20%，这对于具有不同书写方向的多语言站点非常有用。

'vi' 是 "视窗内联大小"。它类似于 'vw'，但同样，它尊重书写模式。

.header {
height: 10vi;
}

这创建了一个始终是视窗内联尺寸10%的标题，无缝地适应不同的书写模式。

CSS中的百分比总是相对于某物的。让我们看看它们的实际应用：

.container {
width: 80%;
margin: 0 auto;
}

.child {
width: 50%;
padding: 5%;
}

在这里，容器是其父元素宽度的80%，居中通过自动边距实现。子元素是容器宽度的一半，内边距是容器宽度的5%。这就像俄罗斯套娃，但带有不可见的盒子！

有时，CSS属性根本不需要单位。让我们看一些例子：

.box {
opacity: 0.5;
line-height: 1.5;
z-index: 100;
}

在这里，不透明度是0到1之间的值，行高是字体大小的倍数，z-index只是一个简单的数字，用于堆叠顺序。这就像拥有一个音量旋钮、一个文本间距器和一层排序器一样！

那么，亲爱的朋友们！我们已经穿越了CSS测量单位的土地，从熟悉的像素到奇异的视窗单位。记住，选择正确的单位就像挑选合适的工具一样 - 它可以让你的生活更轻松，设计更健壮。所以，去测量吧，但要负责任！

Credits: Image by storyset