1.背景色
当不设置html的时候，html的属性不生效，浏览器会捕获body的颜色作为浏览器背景颜色，如果html生效了，则会捕获html的颜色作为浏览器背景颜色。
[例1：不设置 html]
body {
background-color: #069;
margin: 50px;
border: 30px solid #093;
}
[例2：设置 html]
html { // 设置 html 样式
background: #999;
margin: 50px;
border: 30px solid #053;
}
body {
background-color: #069;
margin: 50px;
border: 30px solid #093;
}
2.margin
[例3：去掉前面例子中设置的 margin]
html {
background: #999;
border: 30px solid #053;
}
body {
background-color: #069;
border: 30px solid #093;
}
html 与 浏览器 之间：默认没有 margin
html 与 body 之间：默认有 margin
[例4：设置 body { margin: 0; } ——> 会使 html 与 body 之间的 margin 消失]
html {
background: #999;
border: 30px solid #053;
}
body {
background-color: #069;
border: 30px solid #093;
margin: 0;
}
3.宽和高
张鑫旭-鑫空间-鑫生活：对html与body的一些研究与理解：
要想高度百分比起作用，一般来说，要满足两个条件：
其一，父标签有高度可寻，就是向上遍历父标签要找到一个定值高度（body，html另外讨论），如果中途有个height为auto或是没有设置height属性，则高度百分比不起作用；
其二，标签本身的属性，如果inline属性的标签，如果没有浮动，zoom，或是绝对定位之类属性是不支持百分比高度的，block或inline-block属性可以说是高度百分比起作用的前提条件之一吧。
默认状态下，body不是高度100%显示的
html 和 body 的默认高度都为0；默认宽度遵照 div 元素，自动撑满整个容器。
如果不设置
html和body的box-sizing: border-box，边框的存在会让浏览器产生滚动条（如果width和height都设置了 100% 的话，横竖都会产生滚动条）
[例5：同时设置 html 和 body 宽和高为100%]
html {
background: #999;
border: 30px solid #053;
// box-sizing: border-box;
width: 100%;
height: 100%;
}
body {
background-color: #069;
border: 30px solid #093;
// box-sizing: border-box;
width: 100%;
height: 100%;
}
- 只设置
body的高为100%，不起作用，因为父元素高度为0； - 横向（竖向）滚动条的产生：
html和body都等于浏览器宽度（高度），但是边框又使盒模型更大了，一方面html会挤出去，body的向右（向下）偏移又会增加一定的距离。
html {
background: #999;
border: 30px solid #053;
// box-sizing: border-box;
width: 100%;
height: 100%;
}
body {
background-color: #069;
border: 30px solid #093;
// box-sizing: border-box;
width: 100%;
height: 100%;
}
如果 html 不设置边框，则浏览器滚动条的产生是由 body 与 html 之间的 margin 造成的。同样，设置 body { margin: 0; } ——> 会使浏览器滚动条消失