html标签与body标签的解析

概述

许多的web开发者不了解给html与body元素设置样式有什么不一样，大多数时候开发者只是给body设置样式，当不起作用的时候，他们会把所有的样式都加到html与body元素上，直到出现觉得符合他们的期望的效果了，但是他们并不知道样式是在谁的身上起了作用。
出现这种混乱的情况是可以理解的，因为一开始，我们都认为这两个元素是一样的，因为我们给html或body加一个背景色，整个页面都起作用了。这篇文章试图开导作为web开发者的你，在现代浏览器中，这两个元素的有什么区别

块级元素中内容的表现

首先，让我们来看一下当块级元素中有内容的时候的表现:

 

没有定高也没有overlfow属性的时候

从上面的例子我们可以看出，块级元素没有指定高度的时候，它会自动调整自己的高度来包含它的内容，以至于不会超出它的范围。那么我们给块级元素设置高度，那么它的表现回事怎么样的呢？那么这个就要取决于css overflow属性的值了。那么就来看下当给块级元素设置高度的时候，根据overflow属性值的不同的表现

 

Paste_Image.png

根据以上的图片，大家应该能了解了overflow的各种属性值的表现情况。但是需要特别说明的是overflow:auto;这个属性值。当我们需要实现当内容比我们限定的高度高时就出现滚动条，否则不出现，这个时候我们就应该使用overflow:auto,而不是overflow:scroll;因为在firefox下只要设置了overflow:scroll值,就算内容高度小于限定的高度，也会出现滚动条。

那么滚动条是从哪里来的呢

在很多的html页面中，都是有足够多的内容填充页面而导致右边出现了滚动条，那么滚动条是从哪里来的呢，魔法？或者是ui间的幽会？或许，我们更加愿意相信的是因为html元素默认添加了css样式规则 html{overflow:auto}

但是你会觉得，就算html元素默认加了overflow:auto，但是它没有设置高度啊，块级元素不是设置了高度跟overflow:auto才能出现滚动条的吗。对的，你想的没错，但是html这个块级元素有那么一点点特别。

根据我的验证，当给html元素设置高度height:100%时，html元素的高度等于浏览器窗口的高度，当内容高度高于浏览器高度时，html元素就会出现滚动条，这个普通的块级元素是一样的。而没给html元素设置高度时，它的高度是由内容决定的，当内容的高度大于浏览器窗口的高度时，虽然html元素的高度跟元素内容一样高，但是也会出现滚动条，着显然不符合块级元素的规则，根据我的猜测，html的滚动条出现的临界条件应该是，不管html的高度是多少，只要html的高度大于浏览器窗口的高度就会出现滚动条。这可能也是html元素的特别之处?

 

Paste_Image.png

如上图，我没有给html、body元素设置高度，且我的浏览器窗口的高度是324px，但是html元素的高度却达到了398px,并且出现了滚动条。如果给html设置了高度，并且加了overflow:hidden,但是超出高度的部分仍然可见，但是滚动条消失了

 

Paste_Image.png

由上可以总结出两点：

1. 如果给html元素设置了高度并且加了overflow:hidden，内容并不会被隐藏掉，而是超过浏览器高度的部分被隐藏掉。
2. 只要给html元素设置了overflow:hidden,滚动条都会被禁掉（android发现特列），不管有没有给html元素设置高度。

最终结论

1. html 与 body标签是不同的块级元素，是父子关系

2. html元素的宽与高取决于浏览器的宽高。html元素是块级元素，根据块级元素的性质，html默认宽度是占一行的，也就是浏览器窗口的宽度。如果没给html设置高度，那么默认的高度就是有它里面包含的内容高度所决定的，如果给html设置了height:100%,那么它的高度就是浏览器窗口的高度。
3. html元素默认设置了overflow:auto的css样式，在需要的时候就会显示滚动条。也就是它里面的内容高度超过了浏览器窗口的高度，不管html有没有加上高度，都会出现滚动条。
4. body元素默认的定位是position:static，基于 **设置了定位的元素是参考该元素最近的、且设置了非static定位属性的父元素 来定位 **的原则，那么所有定位子元素（父元素没设置定位属性）的定位都是相对于html元素的坐标系统。
5. 在几乎所有的现代浏览器中，页面跟浏览器窗口的偏移量是通过给body元素设置margin属性，而不是给html元素设置padding属性。我给html设置了padding也是起作用的。