掌握web开发基础系列--长度单位

栏目: CSS · 发布时间: 4年前

内容简介：css中的长度单位有哪些？。

css中的长度单位有哪些？

px , pt ， em ， rem ， % ， vw ， vh ， vmin ， vmcx ， ex ， ch ， cm ， mm ， in(inch) ， pc ···

我们常用的其实就是 px ， em ， rem ， % 四种，下文中我们将对常用的长度单位重点分析，对非常用的长度单位简单介绍。首先我们要知道css中的长度单位可以分为两类： 相对长度单位 和 绝对长度单位

。

相对长度单位

css相对长度单位中的 “相对” 二字，表明了其长度会随着它的参考值的变化而变化，不是固定的。所以，在使用相对长度单位之前一定要知道其 参考元素 是什么。

1、px (pixel)

思考： 1px 到底有多长？

关于 px 的相关信息《CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport》这篇文章中已经介绍的很详细很详细。下面对 px 进行概括总结。

浏览器内的一切长度都是以CSS像素为单位的，CSS像素的单位是 `px` ， `px` 是一个相对单位，相对的是设备像素(device pixel)，也就是物理像素，其相对性体现在在同一个设备上或在不同设备之间每1个 `px` 所代表的物理像素是可以变化的。

那么 px 到底是什么？

px 实际是pixel（像素）的缩写，根据维基百科的解释，它是图像显示的基本单元，既不是一个确定的物理量，也不是一个点或者小方块，而是一个抽象概念。所以在谈论像素时一定要清楚它的上下文！一定要清楚它的上下文！一定要清楚它的上下文！

不同的设备，图像基本采样单元是不同的，显示器上的物理像素等于显示器的点距，而打印机的物理像素等于打印机的墨点。而衡量点距大小和打印机墨点大小的单位分别称为ppi和dpi：

ppi：每英寸多少像素数，放到显示器上说的是每英寸多少物理像素及显示器设备的点距。

dpi：每英寸多少点。

关于打印机的点距我们不去关心，只要知道当用于描述显示器设备时ppi与dpi是同一个概念。

CSS像素的真正含义

由于不同的物理设备的物理像素的大小是不一样的，所以css认为浏览器应该对css中的像素进行调节，使得浏览器中 1css像素的大小在不同物理设备上看上去大小总是差不多，目的是为了保证阅读体验一致。为了达到这一点浏览器可以直接按照设备的物理像素大小进行换算，而css规范中使用 参考像素 来进行换算。

1参考像素即为从一臂之遥看解析度为96DPI的设备输出（即1英寸96点）时，1点（即1/96英寸）的视角。它并不是1/96英寸长度，而是从一臂之遥的距离处看解析度为96DPI的设备输出一单位（即1/96英寸）时视线与水平线的夹角。通常认为常人臂长为28英寸，所以它的视角是: (1/96)in / (28in * 2 * PI / 360deg) = 0.0213度。

由于css像素是一个视角单位，所以在真正实现时，为了方便基本都是根据设备像素换算的。浏览器根据硬件设备能够直接获取css像素。

这个换算过程有些烧脑，感兴趣的同学自己去研究css规范。下面两个不同设备物理像素转换为css像素的对比。

设备名称	屏幕（设备）分辨率	浏览器最大宽度（css像素）
14英寸MacBook PRO	2560dp x 1600dp	1440px
13.3英寸HP 440 G5	1366dp x 768dp	1366px

2、em

em 用来适应用户所使用的字体，1 em 相当于当前的字体尺寸（ font-size 属性），2 em 相对于当前字体尺寸的2倍。

如果当前元素的父元素设置了 font-size ，则 em 参考元素为其父元素。
如果当前元素的父元素没有设置 font-size ，则逐级向上查找有设置 font-size 属性的元素，直到 <html> 根元素。
如果当前元素的父元素向上所有父元素均没有设置 font-size ，则 em 其参考大小为浏览器默认大小 16px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!--此处样式可忽略-->
    <style>
        .box-out { text-align: center;width: 240px;height: 120px;margin-top: 10px;margin-left: 10px;
        border: 1px solid dodgerblue; float: left;}
        .box-inner {text-align: center;width: 180px;height: 60px;margin-top: 10px;margin-left: auto;
        margin-right: auto;border: 1px solid darkorchid; }
    </style>
</head>
<body>
    <div class="box-out">
        16px字体(浏览器默认大小)
        <div class="box-inner" style="font-size: 1em">
            1em字体
        </div>
    </div>
    <div class="box-out" style="font-size: 14px">
        14px字体
        <div class="box-inner" style="font-size: 1em">
            1em字体
        </div>
    </div>
    <div class="box-out" style="font-size: 14px">
        14px字体
        <div class="box-inner">
            <span style="font-size: 1.5em">1.5em字体，相当于(14*1.5 = 21)px</span>
        </div>
    </div>
    <div class="box-out" style="font-size: 24px">
        24px字体
        <div class="box-inner" style="font-size: 0.5em">
            <span style="font-size: 1.5em">1.5em字体，相当于(24*0.5*1.5 = 18)px</span>
        </div>
    </div>
</body>
</html>
复制代码

妙招：段落首行缩进两个汉字

.indent {
    text-indent: 2em;
}
复制代码

3、rem

rem 即 root em ，其参考元素为文档的根元素 <html> 中 font-size 属性。

如果文档根元素 <html> 没有设置 font-size 属性，那么当前元素 rem 相对于浏览器默认字体大小 16px
如果文档根元素 <html style="font-size: 20px"> 设置了 font-size 属性，那么当前元素 rem 相对于文档的根元素 <html>

<!DOCTYPE html>
<html lang="en" style="font-size: 20px">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!--此处样式可忽略-->
    <style>
        .box-out { text-align: center;width: 240px;height: 120px;margin-top: 10px;margin-left: 10px;
        border: 1px solid dodgerblue; float: left;}
        .box-inner {text-align: center;width: 180px;height: 60px;margin-top: 10px;margin-left: auto;
        margin-right: auto;border: 1px solid darkorchid; }
    </style>
</head>
<body>
    <div class="box-out">
        20px字体(文档根元素字体大小)
        <!--此时em也相对于<html>上面的fontSize-->
        <div class="box-inner" style="font-size: 1em">
            1em字体，相当于20px
        </div>
    </div>
    <!--下面元素设置fontSize对子元素rem不起作用-->
    <div class="box-out" style="font-size: 12px">
        12px字体
        <div class="box-inner" style="font-size: 1rem">
            1rem字体，相当于20px
        </div>
    </div>
</body>
</html>
复制代码

em ， rem 不仅仅是用于控制当前字体的大小，可以应用于各自可以设置长度的属性上，width、height···

4、百分比 - %

在做页面布局时需要知道的几个点：

块级元素默认宽度 width 是 100% ，默认高度 height 是 0 。
块级元素的默认宽度 100% 是相对其父元素的宽度，父元素的宽度相对更上一级元素的宽度。

思考：为什么块级元素默认高度 height 是 0 而不是 100% ？

浏览器是如何计算高度与宽度的？

Web浏览器在计算有效宽度时会考虑浏览器窗口的打开宽度。如果你不给宽度设定任何缺省值，那浏览器会自动将页面内容平铺填满整个横向宽度。即我们不设置宽，会自动填满整个横向宽度。

高度的计算方式完全不一样。事实上，浏览器根本就不计算内容的高度，除非内容超出了视窗范围(导致滚动条出现)。或者你给整个页面设置一个绝对高度。否则，浏览器就会简单的让内容往下堆砌，页面的高度根本就无需考虑。更多相关内容请阅读《为啥你的height:100%不起作用？》

5、vw、vh

vh vw全称为Viewport Height和Viewport Width 意思就是视窗 ,vh、vw是相对于视口的高度和宽度。1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度。

例如：浏览器高度900px，宽度为750px, 1 vh = 9 px，1vw = 7.5 px。设置一个和屏幕同宽的标题，h1{font-size:100vw}，那标题的字体大小就会自动根据浏览器的宽度进行缩放，以达到字体和viewport大小同步的效果。

6、vmin、vmcx

vmin：vw和vh中较小的那个。 vmax：vw和vh中较大的那个。

例如，如果浏览器设置为1100px宽、700px高，1vmin会是7px,1vmax为11px。然而，如果宽度设置为800px，高度设置为1080px，1vmin将会等于8px而1vmax将会是10.8px

7、ex

当前字体的x-height(当前字体小写x的高度)，在无法确定x高度的情况下以0.5em计算。

8、ch

数字0的宽度，无法确定时为0.5em。

绝对长度单位

绝对长度单位是一个固定的值，它反应一个真实的物理尺寸。绝对长度单位视输出介质而定，不依赖于环境（显示器、分辨率、操作系统等）。

注：在日常web开发中绝对长度单位的使用场景着实太少，简单了解即可。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

人人都在说谎

赛思·斯蒂芬斯--达维多维茨 / 胡晓姣、张晨、左润男 / 中信出版集团 / 2018-11 / 58

有多少人买了书真正看完了？你朋友的酒量有他说的那么大吗？父母是否暗自喜欢男孩儿多于女孩儿？电影里暴力镜头增多会导致犯罪率升高吗？种族歧视在现如今的美国还严重吗？特朗普的胜利有征兆吗，什么促成他赢得了大选？ …… 你知道问题的答案吗，直觉会怎样告诉你？作者赛思·斯蒂芬斯--达维多维茨是一位前谷歌数据科学家和专栏作家。他的研究发现，世界充满了......一起来看看《人人都在说谎》这本书的介绍吧!

码农工具