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

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

内容简介：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开发中绝对长度单位的使用场景着实太少，简单了解即可。

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

查看所有标签

猜你喜欢:

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

码农书籍

PHP and MySQL Web Development

Luke Welling、Laura Thomson / Sams / July 25, 2007 / $49.99

Book Description PHP and MySQL Web Development teaches you to develop dynamic, secure, commerical Web sites. Using the same accessible, popular teaching style of the three previous editions, this b......一起来看看《PHP and MySQL Web Development》这本书的介绍吧!

码农工具