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

时间 2019-11-06

原文原文链接

思考一下

css中的长度单位有哪些？css

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

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

相对长度单位

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

一、px (pixel)

思考：1px到底有多长？浏览器

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

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

那么px究竟是什么？ui

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

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

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

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

二、em

em用来适应用户所使用的字体，1em至关于当前的字体尺寸（font-size属性），2em相对于当前字体尺寸的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;
}
复制代码

三、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···

四、百分比 - %

在作页面布局时须要知道的几个点：

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

思考：为何块级元素默认高度height是 0而不是100%？
浏览器是如何计算高度与宽度的？

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

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

五、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大小同步的效果。

六、vmin、vmcx

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

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

七、ex

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

八、ch

数字0的宽度，没法肯定时为0.5em。

绝对长度单位

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

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

一、cm

厘米

二、mm

毫米

三、in（Inch）

英寸

四、pt（Point）

点，确切的说法是一个专用的印刷单位“磅”，大小为1/72英寸。用于印刷业。

五、pc（Pica）

派卡，至关于我国新四号铅字的尺寸。

参考文章

css长度单位
 css中pt、px、em、ex、in等这类长度单位详细说明
 css中单位em和rem的区别