思考一下
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
用来适应用户所使用的字体,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;
}
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开发中绝对长度单位的使用场景着实太少,简单了解即可。
1、cm
厘米
2、mm
毫米
3、in(Inch)
英寸
4、pt(Point)
点,确切的说法是一个专用的印刷单位“磅”,大小为1/72英寸。用于印刷业。
5、pc(Pica)
派卡,相当于我国新四号铅字的尺寸。