重新认识布局：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>

　　

posted @ 2021-06-25 14:16  小虫1  阅读(347)  评论(0)  编辑  收藏  举报