一.px
- px是固定单位，其他几种都是相对单位。当我们把电脑屏幕的分辨率调为1440*900时，css里设置的1px实际的物理尺寸就是屏幕宽度的1/1440。
二.em
- em：默认字体大小的倍数。比如给元素设置font-size: 2em，这里的默认字体大小实际上是继承自父亲的大小，font-size: 2em表示当前元素字体大小是父亲的2倍。当给元素设置width: 2em，这里的默认字体大小是该元素自身的实际字体大小。
三.rem
- rem：根元素(html 节点)字体大小的倍数。比如一个元素设置 width: 2rem 表示该元素宽度为html节点的font-size 大小的2倍。如果html未设置font-size的大小，默认是16px。需要注意的是chrome浏览器下文字最小是12px，设置低于12px的值最终也会展示12px。
四.vw
vw
1vw 代表浏览器视口宽度的1%。
举个例子：浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。
vh
css3新单位，viewpoint height的缩写，视窗高度，1vh等于视窗高度的1%。
举个例子：浏览器高度900px, 1 vh = 900px/100 = 9 px。
五.百分比
1%
一般宽泛的讲是相对于父元素，但是并不是十分准确。
1、对于普通定位元素就是我们理解的父元素
2、对于position: absolute;的元素是相对于已定位的父元素
3、对于position: fixed;的元素是相对于 ViewPort（可视窗口）
注意
-
font-size: 200% 和font-size: 2em 一样，表示字体大小是默认（继承自父亲）字体大小的2倍。
-
line-height: 200% 表示行高是自己字体大小的2倍。
-
width: 100%在标准盒模型下表示自己content的宽度等于父亲content的宽度，在IE盒模型下表示自己content+padding+border的宽度等于父亲content的宽度。
巩固
做完下面几个题目，测一测自己是否真正分辨这几个单位的区别。答案在文末。
题目1：关于px，以下说法正确的是？(单选)
- A、小明电脑的分辨率是1280x800，在写页面CSS时给元素设置width: 1280px。这个元素的实际占据的宽度和电脑屏幕宽度相同
- B、小明电脑的分辨率是1280x800，在写页面CSS时给元素设置width: 1280px。这个元素的实际占据的宽度和浏览器窗口宽度相同
- C、小明把电脑的分辨率调到2560x1600，CSS里元素宽度依旧是width: 1280px。这个元素的实际占据的宽度和电脑屏幕宽度相同
- D、小明把电脑的分辨率调到2560x1600，CSS里元素宽度依旧是width: 1280px。这个元素的实际占据的宽度和浏览器窗口宽度相同
题目2: 下面代码中，body、article、p的实际字体大小分别是多少？
- A、body是32px， article是16px，p是32px
- B、body是32px， article是32px，p是64px
- C、body是16px， article是16px，p是32px
- D、body是32px， article是32px，p是32px
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>em 演示</title>
</head>
<body>
<article>
<p>hello</p>
</article>
<style>
body{
font-size: 2em;
}
p {
font-size: 2em;
}
</style>
</body>
</html>
题目3: 以下代码中，p的width的实际值是多少？(单选)
- A、32px
- B、64px
- C、128px
- D、256px
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>em 演示</title>
</head>
<body>
<article>
<p>hello</p>
</article>
<style>
body{
font-size: 2em;
}
p {
font-size: 2em;
width: 2em;
}
</style>
</body>
</html>
题目4: 以下代码中，p的字号是多少？(单选)
- A、20px
- B、40px
- C、80px
- D、32px
\
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>rem 演示</title>
</head>
<body>
<article>
<p>hello</p>
</article>
<style>
body {
font-size: 10px;
}
article {
font-size: 20px;
}
p {
font-size: 2rem;
}
</style>
</body>
</html>
题目5：Chrome下以下代码，h1和p的字号分别是？(单选)
- A、h1 12px, p 20px
- B、h1 10px, p 20px
- C、h1 16px, p 32px
- D、h1 18px, p 36px
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>rem 演示</title>
</head>
<body>
<h1>hello</h1>
<article>
<p>hello</p>
</article>
<style>
html{
font-size: 10px;
}
body {
font-size: 18px;
}
h1 {
font-size: 1rem;
}
article {
font-size: 20px;
}
p {
font-size: 2rem;
}
</style>
</body>
</html>
题目6：关于vw，以下说法正确的是(单选)
- A、小明电脑的分辨率是1280x800，在写页面CSS时给元素设置width: 100vw，表示这个元素的width宽度和电脑屏幕宽度相同，是1280px
- B、小明电脑的分辨率是1280x800，在写页面CSS时给元素设置width: 100vw，表示这个元素的width和浏览器的窗口宽度相同
- C、小明电脑的分辨率是1280x800，在写页面CSS时给元素设置width: 100vw，表示这个元素的width和父容器的width相同
- D、width: 100vh 和 width: 100% 等价
题目7：关于width: 100%，以下说法正确的是(多选)
- A、在标准盒模型下，width: 100%表示元素的content宽度等于父元素的content宽度
- B、在标准盒模型下，width: 100%表示元素的content宽度等于父元素的content + padding + border宽度
- C、IE盒模型下，width: 100%表示元素的content + padding + border宽度等于父元素content的宽度
- D、IE盒模型下，width: 100%表示元素的content宽度等于父元素content的宽度
答案解析
- 题目1：A。
- 题目2：B。html默认是16px，body是2em，是默认的2倍32px， article是32px，p是article的2倍64px。
- 题目3：C。p的宽度是默认字号的2倍， 字号是64px。
- 题目4：D。p是2rem，是html字号的2倍。html默认字号是16px。
- 题目5：A。h1字号是1rem，是html字号的1倍10px。但Chrome下字号最小值是12px，所以h1是12px。p是2rem，即html字号的2倍20px。
- 题目6：B。100vw表示把浏览器窗口宽度分100份，占100份。注意浏览器窗口宽度和屏幕宽度的区别。
- 题目7：A、C。在标准盒模型下，width: 100%表示元素的content宽度等于父元素的content宽度，IE盒模型下，width: 100%表示元素的content + padding + border宽度等于父元素content的宽度。动手做个测试即可。
你答对了几道？
