CSS - 测量单位：初学者指南

你好啊，未来的CSS大师们！? 欢迎来到CSS测量单位的世界。作为你友好的邻里电脑老师，我很高兴能引导你学习网页设计的这个基本方面。如果你之前从未编写过一行代码，也不用担心——我们将从头开始，一起构建我们的知识！

CSS - Units

长度单位：CSS测量的基石

让我们从基础开始。在CSS中，我们使用各种单位来指定元素的大小、边距、填充等。把这些单位想象成数字世界的尺子和卷尺。它们帮助我们创建在各种设备上看起来都很棒的网站，从微小的智能手机到巨大的台式显示器。

下面是CSS中最常见的长度单位表格：

现在，让我们深入了解这些单位，看看它们在实际中是如何工作的！

'em'单位就像变色龙一样——它会适应周围环境。一个'em'等于当前元素的字体大小。这使得它在创建可缩放设计中非常实用。

.parent {
font-size: 16px;
}

.child {
font-size: 1.5em; /* 这将是24px */
margin-bottom: 1em; /* 这也将是24px */
}

在这个例子中，.child元素的字体大小将是24px（1.5 * 16px），它的底部边距也将是24px。就像.child在说，“我想比我的父元素大1.5倍！”

'ch'单位有点像排版爱好者。它基于当前字体中'0'（零）字符的宽度。这对于创建一致的布局特别有用，特别是对于等宽字体。

.code-snippet {
font-family: 'Courier New', monospace;
width: 40ch; /* 40个'0'字符的宽度 */
}

这将创建一个正好40个字符宽的框——完美显示代码片段！

'rem'单位就像是CSS家族中的智者。它总是引用根元素的字体大小（通常是<html>标签），忽略任何父元素的字体大小。

html {
font-size: 16px;
}

.container {
font-size: 20px;
}

.container p {
font-size: 1.5rem; /* 这将是24px，基于html的字体大小 */
}

在这种情况下，即使.container有不同字体大小，其中的段落仍然将是24px（1.5 * 16px来自根元素）。

'llh'单位基于元素的行高，而'rlh'是基于根元素的行高。这些是较新的单位，非常适合在设计中创建垂直节奏。

.paragraph {
font-size: 16px;
line-height: 1.5;
margin-bottom: 1lh; /* 这将等于行高 */
}

这根据行高创建了段落之间漂亮、一致的空间。

现在我们进入了视口单位——这些是我的个人最爱！'vh'代表视口高度，'vw'代表视口宽度。它们是视口总大小的百分比。

.hero-section {
height: 100vh; /* 视口的全高度 */
width: 100vw; /* 视口的全宽度 */
}

.half-width {
width: 50vw; /* 视口宽度的一半 */
}

这些单位非常适合创建响应式设计，以适应任何屏幕大小。我曾经使用它们创建了一个全屏的登录页面，它在从手机到巨型电视屏幕的所有设备上都看起来很棒！

'vmin'和'vmax'是视口单位的动态二人组。'vmin'使用视口的小维度，而'vmax'使用视口的大维度。

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

这创建了一个完美的正方形，它总是视口小维度的50%——这对于保持宽高比很有用！

'vb'单位基于视口在块方向的大小（通常是水平书写模式的高度）。它与'vh'类似，但适应不同的书写模式。

.vertical-text {
writing-mode: vertical-rl;
height: 100vb; /* 垂直书写模式的全高度 */
}

这对于在水平和垂直书写系统中都能良好工作的布局特别有用。

'vi'单位是'vb'的行内版本。它基于视口在行内方向的大小（通常是水平书写模式的宽度）。

.horizontal-scroll {
width: 200vi; /* 视口宽度的两倍 */
overflow-x: scroll;
}

这创建了一个水平滚动的元素，它总是视口宽度的两倍。

CSS中的百分比总是相对于某物。对于宽度，它们通常相对于父元素的宽度。

.parent {
width: 300px;
}

.child {
width: 50%; /* 这将是150px */
}

在这里，.child元素总是其父元素宽度的一半。就像告诉你的元素，“你可以拥有你父母的一半！”

有时，你会看到没有单位的CSS属性——只有数字。这些通常用于无单位的属性，如line-height或opacity。

p {
line-height: 1.5; /* 字体大小的1.5倍 */
opacity: 0.8; /* 80%的不透明度 */
}

在这种情况下，行高将是字体大小的1.5倍，创建出间距良好的文本，而不透明度将使文本稍微透明。

就这样，朋友们！我们一起穿越了CSS测量单位的世界。记住，掌握这些关键在于实践。尝试在你的项目中混合搭配这些单位，你很快就会对何时使用每个单位产生直觉。

快乐编码，愿你的布局总是像素完美！?✨

Credits: Image by storyset