重新认识布局：html和body元素
本文首发于知乎：https://www.zhihu.com/people/xiao-chong-10-60
在网页开发中，html和body是2个非常特殊的元素。其中，html叫根元素，看下面几个问题：
1.如果body里什么东西都没有，那么html和body的宽高是多少？
答案：2者宽是浏览器可视窗口的宽，高是0。
2.如果body里什么东西都没有，body的高是0，那么给body设置背景色，背景色多大？
答案：如果一个div的高度是0，设置背景色，不会有任何效果。但是，body的背景色会占满浏览器可视窗口。
3.html和body是BFC吗？
答案：html是BFC，body不是。
一个很明显的例子，给body设置margin-top，html不会塌陷（margin重叠或者合并）。给body里的div设置margin-top,body会塌陷。
4.在js里怎么获取html和body
// 1.获取body 元素 var bodyEle = document.body; // 2.获取html 元素 var htmlEle = document.documentElement;
5.监测页面滚动，可以在html或者body上添加scroll事件吗？
不可以，参见以下代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-color: pink;
height: 1000px;
}
</style>
</head>
<body>
<script>
//无效
document.body.addEventListener('scroll', function (e) {
console.log(this.scrollTop);
console.log(window.pageYOffset);
})
//无效
document.documentElement.addEventListener('scroll', function (e) {
console.log(this.scrollTop);
console.log(window.pageYOffset);
})
document.addEventListener('scroll', function (e) {
console.log(window.pageYOffset);
})
window.addEventListener('scroll', function (e) {
console.log(window.pageYOffset);
})
</script>
</body>
</html>
