概述
许多的web开发者不了解给html与body元素设置样式有什么不一样,大多数时候开发者只是给body设置样式,当不起作用的时候,他们会把所有的样式都加到html与body元素上,直到出现觉得符合他们的期望的效果了,但是他们并不知道样式是在谁的身上起了作用。
出现这种混乱的情况是可以理解的,因为一开始,我们都认为这两个元素是一样的,因为我们给html或body加一个背景色,整个页面都起作用了。这篇文章试图开导作为web开发者的你,在现代浏览器中,这两个元素的有什么区别
块级元素中内容的表现
首先,让我们来看一下当块级元素中有内容的时候的表现:
![](http://upload-images.jianshu.io/upload_images/1985420-b0537ad2b98e9a4b.png?imageMogr2/auto-orient/strip|imageView2/2/w/689/format/webp)
从上面的例子我们可以看出,块级元素没有指定高度的时候,它会自动调整自己的高度来包含它的内容,以至于不会超出它的范围。那么我们给块级元素设置高度,那么它的表现回事怎么样的呢?那么这个就要取决于css overflow属性的值了。那么就来看下当给块级元素设置高度的时候,根据overflow属性值的不同的表现
![](http://upload-images.jianshu.io/upload_images/1985420-f5a8c9417a5e3272.png?imageMogr2/auto-orient/strip|imageView2/2/w/639/format/webp)
根据以上的图片,大家应该能了解了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元素的特别之处?
![](http://upload-images.jianshu.io/upload_images/1985420-989f9530ff45aa73.png?imageMogr2/auto-orient/strip|imageView2/2/w/641/format/webp)
如上图,我没有给html、body元素设置高度,且我的浏览器窗口的高度是324px,但是html元素的高度却达到了398px,并且出现了滚动条。如果给html设置了高度,并且加了overflow:hidden,但是超出高度的部分仍然可见,但是滚动条消失了
![](http://upload-images.jianshu.io/upload_images/1985420-c9dbb9e724751947.png?imageMogr2/auto-orient/strip|imageView2/2/w/753/format/webp)
由上可以总结出两点:
- 如果给html元素设置了高度并且加了overflow:hidden,内容并不会被隐藏掉,而是超过浏览器高度的部分被隐藏掉。
- 只要给html元素设置了overflow:hidden,滚动条都会被禁掉(android发现特列),不管有没有给html元素设置高度。
最终结论
- html 与 body标签是不同的块级元素,是父子关系
- html元素的宽与高取决于浏览器的宽高。html元素是块级元素,根据块级元素的性质,html默认宽度是占一行的,也就是浏览器窗口的宽度。如果没给html设置高度,那么默认的高度就是有它里面包含的内容高度所决定的,如果给html设置了height:100%,那么它的高度就是浏览器窗口的高度。
- html元素默认设置了overflow:auto的css样式,在需要的时候就会显示滚动条。也就是它里面的内容高度超过了浏览器窗口的高度,不管html有没有加上高度,都会出现滚动条。
- body元素默认的定位是position:static,基于 **设置了定位的元素是参考该元素最近的、且设置了非static定位属性的父元素 来定位 **的原则,那么所有定位子元素(父元素没设置定位属性)的定位都是相对于html元素的坐标系统。
- 在几乎所有的现代浏览器中,页面跟浏览器窗口的偏移量是通过给body元素设置margin属性,而不是给html元素设置padding属性。我给html设置了padding也是起作用的。
作者:木白no1
链接:https://www.jianshu.com/p/29d0fe0e7c4c
来源:简书