关于body和html

body和html深入的探讨会发现有很多普遍还不知道的东西, 网上讲得也很少.

standard模式和非standard模式

standard模式: HTML4, 定义了文档类型标签 都是standard模式
非standard模式: 传统的HTML1.0...等
standard模式后，定义和解析将更加严格，所有定义必须从顶级标签html开始。可以理解为传统非standard模式定义body的用法，standard模式下都必须在html上定义。
页面高度

---

    html {
    background: blue;
    border: 10px solid red;
    margin: 10px;
    }
    body {
    background: pink;
    border: 10px solid green;
    margin: 10px;
    padding: 10px;
    }

非standard模式 body和html的默认高度都是100%

standard模式下 body, html的默认高度是内容高度

背景色为什么是全屏的后面会讲到
滚动条

---

可以这么认为，非standard模式页面的默认滚动条是body的，而standard则是html的
standard模式下的body默认就没有滚动条，只是html下级的一个容器而已，这样定义会看的更清楚：

html { background:#ccc; height:100%; border:0; overflow:scroll;}
body { background:#f00; height:100%; margin:0; overflow:scroll;}

定位参照

---

相同的道理，standard模式下当使用position方法的时候，其定位参照肯定是html，而不是非standard模式的body

背景色

大家有没发现在给body设置背景色时, 是全屏的, 即使给body设置了margin.

body {
    background: pink;
    border: 10px solid green;
    margin: 10px;
    padding: 10px;
}

这是什么原因呢, 我猜测是浏览器全屏背景色会优先应用html的background, 若果没有设置, 则会应用body的background
如下给html设置background:

html {
    background: blue;
}
body {
    background: pink;
    border: 10px solid green;
    margin: 10px;
    padding: 10px;
}