CSS入门13-单位详解
CSS入门13-单位详解
（注1：如果有问题欢迎留言探讨，一起学习！转载请注明出处，喜欢可以点个赞哦！）
（注2：更多内容请查看我的目录。）
1. 简介
CSS中有很多属性会涉及到长度，比如 width, margin, padding, font-size, border-width等。这些长度由数字和单位组成，数字和单位之间是没有空格的。长度单位的类型有两种：绝对长度单位和相对长度单位。
2. 绝对长度单位
绝对长度单位的含义，就是客观上绝对存在的单位，放在任何地方都一样。
- 像素px 最常见的单位，很多其他单位都会最终映射成像素。这个单位我们会在后面详细解析。
- 英寸in 1in = 2.54cm = 96px
- 厘米cm 1cm = 10mm = 96px/2.54 = 37.8px
- 毫米mm 1mm = 0.1cm = 3.78px
- 1/4毫米q 1q = 1/4mm = 0.945px
- 点pt 1pt = 1/72in = =0.0139in = 1/72_2.54cm = 1/72_96px = 1.33px 7.派卡pc 1pc = 12pt = 1/6in = 1/6*96px = 16px
3. 相对长度单位
3.1 相对字体大小的长度单位
3.1.1 em
em相对于应用在当前元素的字体尺寸。如果用于font-size属性本身，相对于父元素的font-size计算；若用于其他属性，相对于元素本身的font-size计算。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3.1</title>
<style>
.outer {
font-size: 20px;
}
.div1 {
/*相对于父元素，大小为40px*/
font-size: 2em;
/*相对元素本身，高度为5*40=200px*/
height: 5em;
background-color: green;
}
.div2 {
/*相对于父元素，高度为5*20=100px*/
height: 5em;
background-color: blue;
}
</style>
</head>
<body>
<div class="outer">
<div class="div1">div1</div>
<div class="div2">div1</div>
</div>
</body>
</html>
3.1-1
3.1-2
3.1.2 rem
rem相对于根元素的字体尺寸。IE8不兼容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3.1.2-1</title>
<style>
html {
/*浏览器默认字体大小16px，所以根元素字体大小2*16=32px*/
font-size: 2rem;
}
.outer {
/*字体大小3*32=96px*/
font-size: 3rem;
}
.div1 {
/*字体大小32px*/
font-size: 1rem;
/*高度5*32=160px*/
height: 5rem;
background-color: green;
}
</style>
</head>
<body>
<div class="outer">
<div class="div1">div1</div>
</div>
</body>
</html>
3.1.2-1
但是根部元素设置成rem或者使用默认大小不方便计算，所以一般将根部元素字体大小设置为100px。为什么不是10px呢，因为chrome下字体大小最小为12px。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3.1.2-2</title>
<style>
html {
/*根元素字体大小100px*/
font-size: 100px;
}
.outer {
/*字体大小0.2*100=20px*/
font-size: 0.2rem;
}
.div1 {
/*字体大小0.2*100=20px*/
font-size: 0.2rem;
/*高度0.5*100=50px*/
height: 0.5rem;
background-color: green;
}
</style>
</head>
<body>
<div class="outer">
<div class="div1">div1</div>
</div>
</body>
</html>
3.1.2-2
3.1.3 ex
ex是指所用字体中小写x的高度，不同字体x的高度可能不同。实际上，很多浏览器取em值一半作为ex值。
ex在实际中常用于微调。
3.1.4 ch
ch与ex类似，被定义为数字0的宽度。当无法确定数字0宽度时，取em值的一半作为ch值。
IE8-不支持。
ch在实际中主要用于盲文排版。
3.2 相对视窗宽高的长度单位
视窗相关的长度值相对于初始包含块的大小。当初始包含块的宽高变化时，它们都会相应地缩放。然而，当根元素的overflow值为auto时，任何滚动条会假定不存在。
关于视窗相关的单位有vh、vw、vmin、vmax4个单位。
兼容性上，IE8-不支持，IOS7.1-不支持，android4.3-不支持。(对于vmax，所有IE浏览器都不支持)
另外，黑莓错误的将其相对于视觉视窗来计算。而safari奇怪地相对于html元素来计算，如果html中增加了内容，这两个单位也会发生变化。
3.2.1 vh
布局视窗高度的1/100
设置height:100vh;可以达到与屏幕等高的效果。
3.2.2 vw
布局视窗宽度的1/100
设置width:100vw;可以达到与屏幕等宽的效果。
3.2.3 vmin
布局视窗高度和宽度之间的最小值的 1/100
设置height: 100vmin;width: 100vmin;可以达到类似于contain的效果。
3.2.4 vmax
布局视窗高度和宽度之间的最大值的 1/100
设置height: 100vmax;width: 100vmax;可以达到类似于cover的效果。