回答
- px: 是固定单位,其他几种都是相对单位。
- em: 默认字体大小的倍数。比如给元素设置font-size:2em
- rm: 根元素(html节点)字体大小的倍数。
- 1vw: 代表浏览器视口宽度的1%
- 1%: 对不同的属性有不同的含义。
需要注意的是Chrome 浏览器下的最小是12px,设置低于12px的值最终也会展示12px。
解析
做完下面几个题目,测一测自己是否真正分辨这几个单位的区别
题目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的实际字体大小分别是多少?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>em 演示</title>
</head>
<body>
<article>
<p>hello world</p>
</article>
<style>
body{
font-size: 2em;
}
p {
font-size: 2em;
}
</style>
</body>
</html>
- 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
题目3: 以下代码中,p的width的实际值是多少?(单选)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>em 演示</title>
</head>
<body>
<article>
<p>hello world</p>
</article>
<style>
body{
font-size: 2em;
}
p {
font-size: 2em;
width: 2em;
}
</style>
</body>
</html>
- A、32px
- B、64px
- C、128px
- D、256px
题目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 world</p>
</article>
<style>
body {
font-size: 10px;
}
article {
font-size: 20px;
}
p {
font-size: 2rem;
}
</style>
</body>
</html>
题目5:关于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% 等价
题目6:关于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:B。100vw表示把浏览器窗口宽度分100份,占100份。 注意浏览器窗口宽度和屏幕宽度的区别。
题目6:A、C。在标准盒模型下,width: 100%表示元素的content宽度等于父元素的content宽度,IE盒模型下,width: 100%表示元素的content + padding + border宽度等于父元素content的宽度。动手做个测试即可。
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 模板不会安装或需要功能定制以及二次开发?
发表评论
还没有评论,快来抢沙发吧!