一、先来代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
width: 100%;
}
.test{
height: 100%;
width: 100%;
background: #EE6AA7;
}
</style>
</head>
<body>
<div class="test"></div>
</body>
</html>1、如果要以百分比设置元素（div）的尺寸，必要以父元素的尺寸作为参考，如果父元素没有设置尺寸，那么子元素（div）尺寸自然不会生效。
2、所以如果设置div的高度为100%，那么他的参考元素就是是body，那么如何设置body的尺寸呢？
3、在怪异模式下，body可以作为根元素，设置它的高度为100%的时候（不考虑外边距），body的高度取是浏览器的高度。
4、在标准模式下，html元素才是根节点，div的父元素是body，body的父元素是html，然后html设置为100%，取得是浏览器的高度，body高度设置为100%，得到的是html的的高度，所以最好同时设置html,body{height: 100%;width: 100%;}。
5、因为默认body的margin:8px,所以如果div想占据全屏，需要设置*{margin: 0;padding: 0;}
三、简述名词
标准模式是指，浏览器按W3C标准解析执行代码。
怪异模式则是使用浏览器自己的方式解析执行代码（在网页的最顶端没有<!DOCTYPE html>），因为不同浏览器解析执行的方式不一样，所以我们称之为怪异模式。
四、后言
前端小白一枚，如果有错误的地方还请告知，谢谢。
1676
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
