body和html深入的探讨会发现有很多普遍还不知道的东西, 网上讲得也很少.
standard模式和非standard模式
standard模式: HTML4, 定义了文档类型标签<!DOCTYPE html> 都是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;
}
网友评论