2017-11-08【关于html与body标签的一些说法】

像素是小数时，浏览器中是怎么显示的？

比如11.9px是显示为12px还是11px?

关于html与body标签的一些说法？

基本页面结构：

<!DOCTYPE html>
<html lang="en">
<head>
//...
</head>
<body>
//...
</body>
</html>

html是根标签，那html标签与body标签究竟有哪些差异呢？

1、background-color

只设置body的background-color，整个浏览器会显示该背景色；

但是如果同时设置html与body的background-color，则浏览器会显示html设置的颜色值。

html{
    background-color: darkred;
}
body{
    background-color: yellow;
    border: 10px solid #ccc;
    width: 100px;
    height: 100px;
    margin: auto;
}

1.png

浏览器深红色的背景色是在html标签上设置。居中黄色的部分才是body上设置的。

选自张鑫旭：
当html标签无背景样式时，body的背景色其实不是body标签的背景色，而是浏览器的。一旦html标签含有背景色，则body的背景色变成了正常的body标签（一个实实在在，普普通通标签）的背景色，而此时的html标签最顶级，背景色被浏览器获取，成为浏览器的背景色。

2、对margin属性的支持

在Windows的Chrome浏览器下，html与body标签都支持margin属性。

html{background:darkred; margin:100px; border:10px solid #cccccc;}
body{background:yellow; margin:100px; border:10px solid #cccccc;}

1.png

再测试一下，是否都支持padding属性？

1.png

可以看出是支持的，同样在Windows的Chrome浏览器下。

3、关于滚动条

在Chrome浏览器下打开一个空白的页面，是没有滚动条产生的，如果想让它产生滚动条，这样设置：html{overflow-y: scroll;}。设置在body上也是可以的：body{overflow-y: scroll;}

4、关于背景background属性的fixed定位值

//页面结构
<body><div></div></body>

//在html上设置
html{background:white url(../img/404.jpg) no-repeat fixed center center;}
div{height:2000px;}

//在body上设置
body{background:url(../img/404.jpg) no-repeat fixed center center;}
div{height:2000px;}

经测试，都能实现滚动条滚动，图片死都不动的效果。

5、关于height: 100%;

body在默认情况下，height属性值不是100%显示的。如下：

html{background-color: darkseagreen;}
body{background:yellow; border:50px solid pink;}

1.png

为body设置height: 100%属性

html{background-color: darkseagreen;}
body{background:yellow; border:50px solid pink;height: 100%;}

然而并没有起作用。

解决：在html标签上设置height:100%;

html{margin: 0;background-color: darkseagreen;height: 100%;}
body{margin: 0;background-color: yellow;border: 50px solid pink;height: 100%;}

经测试，body的height变成100%，占据100%的高度。

2017-11-08【关于html与body标签的一些说法】

推荐阅读更多精彩内容