px是固定单位，其他几种都是相对单位。当我们把电脑屏幕的分辨率调为1440*900时，css里设置的1px实际的物理尺寸就是屏幕宽度的1/1440。
em：默认字体大小的倍数。比如给元素设置font-size: 2em，这里的默认字体大小实际上是继承自父亲的大小，font-size: 2em表示当前元素字体大小是父亲的2倍。当给元素设置width: 2em，这里的默认字体大小是该元素自身的实际字体大小。
rem：根元素(html 节点)字体大小的倍数。比如一个元素设置 width: 2rem 表示该元素宽度为html节点的font-size 大小的2倍。 如果html未设置font-size的大小，默认是16px。
1vw 代表浏览器视口宽度的1%。
1% 对不同属性有不同的含义。 font-size: 200% 和font-size: 2em 一样，表示字体大小是默认（继承自父亲）字体大小的2倍。 line-height: 200% 表示行高是自己字体大小的2倍。 width: 100%表示自己content的宽度等于父亲content宽度的1倍。
需要注意的是chrome浏览器下文字最小是12px，设置低于12px的值最终也会展示12px。
做完下面几个题目，测一测自己是否真正分辨这几个单位的区别，答案在后面。
问题1：关于px，以下说法正确的是？(单选)
问题2: 下面代码中，body、article、p的实际字体大小分别是多少？
<!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的实际值是多少？(单选)
<!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的字号是多少？(单选)
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的字号分别是？(单选)
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，以下说法正确的是(单选)
问题7：关于width: 100%，以下说法正确的是(多选)