做完下面几个题目，测一测自己是否真正分辨这几个单位的区别
题目1：关于px，以下说法正确的是？(单选)
D、小明把电脑的分辨率调到2560x1600，CSS里元素宽度依旧是width: 1280px。这个元素的实际占据的宽度和浏览器窗口宽度相同
题目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>
D、body是32px， article是32px，p是32px
题目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>
D、256px
题目4: 以下代码中，p的字号是多少？(单选)
<!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>
D、32px
题目5：Chrome下以下代码，h1和p的字号分别是？(单选)
<!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>
D、h1 18px, p 36px
题目6：关于vw，以下说法正确的是(单选)
D、width: 100vh 和 width: 100\% 等价
题目7：关于width: 100\%，以下说法正确的是(多选)
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。p的宽度是128px。
题目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的宽度。动手做个测试即可。
饥人谷一直致力于培养有灵魂的编程者，打造专业有爱的国内前端技术圈子。如造梦师一般帮助近千名不甘寂寞的追梦人把编程梦变为现实，他们以饥人谷为起点，足迹遍布包括facebook、阿里巴巴、百度、网易、京东、今日头条、大众美团、饿了么、ofo在内的国内外大小企业。 了解培训课程：加微信 xiedaimala03，官网:https://jirengu.com
