但是 :root { background: ... } 与 body { background: ... } 通常没有区别，
这是因为 CSS 规范规定，在没有单独设置 html 元素上的 background 时，
直接应用 body 上的 background 属性的计算值。
div 在html的标签里表示块。HTML 页面有很多嵌套的元素组成。整个页面的结构类似一棵树。有一些元素是“兄弟”，就像从树干上长出的两个树枝；有一些元素是另外元素的“孩子”，就像小树枝从大树枝上长出来（这实际上暗示另外这些元素是这个元素的“父亲”，而且还有父亲的父亲，我们不妨称之为“祖先”）。没有孩子的元素就是“叶子”节点。最外面的元素，也就是所有元素的祖先，成为“根元素”。HTML页面的根元素通常是<html>。
1、在怪异模式下，也就是网页头部不写DOCTYPE的时候，body可以作为html元素的根元素，设置它的高度为百分之百的时候（不考虑外边距），可以使的页面的高度和浏览器客户区相同。
在标准模式下，也就是网页头部写DOCTYPE的时候，body不是html页面的根元素，html才是根元素，如果仅仅设置body的100%，不设置html元素的高度为100%，那么body的高度不会生效，之所以不生效，是因为如果要以百分比设置元素的尺寸，必要以父元素的尺寸作为参考，如果父元素没有设置尺寸，自然不会生效。
2、在标准模式下，由于没有设置html的高度，所以body的高度100%就没有参考高度，于是也就导致div的百分比高度无效，如果将css代码中的第一行设置为:
div的100%是从其上一级div的宽高继承来的，有一点很关键，就是要设置div100%显示，必须设置其上一级div的宽度或高度，否则无效。
前面总得有个容器说明他的高度是多少。这样的话div才能按比例100%继承上一级的高度可惜的是浏览器一般默认解释为内容的高度，而不是100%。
解决方法：只要为html和body设置高度为100%就可以了，html,body{height:100%}，这样之后div会按比例来继承上一级的高度了.仅仅设置的DIV元素的height属性貌似没有什么效果。
另外，html{height:100%}的高度是相对浏览器高度来说的。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）