css绝对单位和相对单位。_您可能不知道的7个CSS单位

最新推荐文章于 2024-03-28 11:00:37 发布

翻译最新推荐文章于 2024-03-28 11:00:37 发布 · 1.3k 阅读

文章标签：

#css #python #java #编程语言 #html

本文深入探讨了CSS中鲜为人知的单位，如rem、vh、vw、vmin、vmax、ex和ch，展示了如何利用这些单位进行更精确的布局控制和响应式设计。

css绝对单位和相对单位。

学习CSS：完整指南

无论您是刚刚开始使用基础知识还是想探索更高级CSS，我们都已构建了完整的指南来帮助您学习 CSS。

CSS新技术

使用我们熟知CSS技术很容易陷入困境，但是这样做会在出现新问题时使我们处于不利地位。

随着网络的不断发展，对新解决方案的需求也将继续增长。因此，作为Web设计师和前端开发人员，我们别无选择，只有了解我们的工具集并充分了解它。

这意味着甚至要知道专用工具-那些不经常使用的工具，但是在需要时才是适合该工作的正确工具。

今天，我将向您介绍一些您以前可能不了解CSS工具。这些工具都是度量单位，例如像素或em，但是您可能从未听说过它们！让我们潜入。

雷姆

我们将从与您可能已经熟悉的事物相似的事物开始。 em单位定义为当前font-size 。因此，例如，如果您在body元素上设置了字体大小，则主体中任何子元素的em值都将等于该字体大小。

<body>
    <div class="test">Test</div>
</body>

body {
    font-size: 14px;
}
div {
    font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px
}

在这里，我们说过div的font-size为1.2em 。这是它继承的字体大小的1.2倍，在本例中为14px。结果是16.8px 。

但是，当您在彼此内部级联em定义的字体大小时会发生什么？在以下代码段中，我们应用与上述完全相同CSS。每个div都从其父级继承其字体大小，从而使我们逐渐增加字体大小。

<body>
    <div>
        Test <!-- 14 * 1.2 = 16.8px -->
        <div>
            Test <!-- 16.8 * 1.2 = 20.16px -->
            <div>
                Test <!-- 20.16 * 1.2 = 24.192px -->
            </div>
        </div>
    </div>
</body>

尽管在某些情况下可能需要这样做，但通常您可能只希望依靠单个指标进行扩展。在这种情况下，您应该使用rem 。 rem的“ r”代表“ root”；这等于在根元素处设置的字体大小；在大多数情况下是html元素。

html {
    font-size: 14px;
}
div {
    font-size: 1.2rem;
}

在上一个示例的所有三个嵌套div中，字体的评估结果为16.8px 。

对网格有利

Rems不仅对字体大小有用。例如，您可以使用rem在根HTML字体大小上建立整个网格系统或UI样式库，并在特定位置使用em缩放。这将为您提供更可预测的字体大小和缩放比例。

.container {
    width: 70rem; // 70 * 14px = 980px
}

从概念上讲，此类策略的思想是允许您的界面随内容的大小扩展。但是，它不一定在每种情况下都最有意义。

我可以使用吗？

功能： caniuse.com上的rem（root em）单位

大众和大众

响应式网页设计技术严重依赖百分比规则。但是，CSS百分比并不总是解决每个问题的最佳解决方案。 CSS宽度是相对于最近的包含父元素的宽度。如果要使用视口的宽度或高度而不是父元素的宽度怎么办？这正是vh和vw单元提供的。

vh元素等于视口高度的1/100。例如，如果浏览器的高度为900px ，则1vh值为9px。同样，如果视口宽度为750px ，则1vw值为7.5px 。

这些规则似乎有无穷的用途。例如，使用单行CSS即可完成全高或接近全高幻灯片的非常简单的方法：

.slide {
    height: 100vh;
}

想象一下，您想要一个设置为填充屏幕宽度的标题。为此，您可以在vw设置字体大小。该大小将随浏览器的宽度缩放。

我可以使用吗？

功能：视口单位： caniuse.com上的vw，vh

vmin和vmax

尽管vh和vm始终始终分别与视口的高度和宽度有关，但vmin和vmax与这些宽度和高度的最大值或最小值有关，这取决于大小。例如，如果将浏览器设置为1100px宽，700px高，则1vmin将为7px， 1vmax将为11px。但是，如果将宽度设置为800px，将高度设置为1080px，则vmin将等于8px，而vmax将被设置为10.8px 。

那么，什么时候可以使用这些值？

假设您需要一个始终在屏幕上可见的元素。使用高度和宽度设置为低于100的vmin值将启用此功能。例如，可以定义始终始终至少接触屏幕两侧的正方形元素：

.box {
    height: 100vmin;
    width: 100vmin;
}

如果需要一个始终覆盖可见视口的方形框（始终触摸屏幕的所有四个侧面），请使用相同的规则，但vmax除外。

.box {
    height: 100vmax;
    width: 100vmax;
}

这些规则的组合提供了一种非常灵活的方式，以新颖有趣的方式利用视口的大小。

我可以使用吗？

功能：视口单位： caniuse.com上的vmin，vmax

前和ch

与em和rem相似，单位ex和ch取决于当前字体和字体大小。但是，与em和rem不同，这些单元还依赖于font-family ，因为它们是基于特定于字体的度量确定的。

ch单位或字符单位被定义为零字符0的宽度的“高级度量”。关于这意味着什么的一些非常有趣的讨论可以在Eric Meyers的博客上找到，但是基本概念是，给定一个等宽字体，一个具有N字符单位的宽度的框，例如width: 40ch; ，始终可以包含具有该特定字体的40个字符的字符串。尽管此特定规则的常规用法与布局盲文有关，但此处的创造力肯定超出了这些简单的应用范围。

ex单位定义为“当前字体的x高度或一em二分之一”。给定字体的x-height是该字体的小写x的高度。通常，这大约是字体的中间标记。

这种单元有许多用途，其中大部分用于印刷微调整。例如，代表上标的 sup元素可以使用相对位置和最低值1ex在行中向上推。同样，您可以拉下标元素。这些浏览器的默认设置使用特定于上标和下标的vertical-align规则，但是如果您想要更精细的控制，则可以像下面这样更明确地处理类型：

sup {
    position: relative;
    bottom: 1ex;
}
sub {
    position: relative;
    bottom: -1ex;
}

我可以使用吗？

自CSS1起， ex单元就存在了，尽管您不会找到对ch单元的如此坚实的支持。有关支持的详细信息，请在quirksmode.org上查看CSS单位和值。

结论

密切关注CSS的持续开发和扩展非常重要，这样您才能知道工具集中的所有工具。也许您会遇到一个特殊的问题，需要使用这些更晦涩的测量单位之一进行意外解决。花时间阅读新的规范。从cssweekly等强大资源中注册新闻更新。并且不要忘记，现在就注册，以获取每周更新，课程，免费教程和类似的内容，来自Tuts +上的Web Design！

更多CSS单位优势。