版权归作者所有，转载请注明出处
HTML和body标签浅谈。
可能是很多小白会遇到的问题。（代码的背景图改日再加）问题描述如下：
1.在body主体下，我想给一个div设置宽高都为100%。背景色为红色。代码如下：
div：Csouterdiv
CSS: body{backgroud-color：red} .Csouterdiv{width:100%;height:100%};
效果：你会发现你给的div的宽高并没有显示，为什么出现这种情况呢？首先我们来分析一下你的标签，你的div属于body的子元素，而百分比是针对于父级元素生效的，所有你会发现，body的默认宽是100%也就是浏览器的窗口的宽度，但是它的高默认是0；
那么我们可以换一种思路，如果我们的div的宽高写的是继承（inherit）;也会出现相同的结果。因为你的body没有高度。继承只会继承宽而高也就继承了0。
既然这样我们是不是考虑给body给个宽高，让它铺满整个浏览器的窗口呢？想法美滋滋。我们试一下。同样给100%；
哎，同样发现怎么还是不起作用，但是如果你设置body的背景颜色就生效了。为什么了？这就是深层次的有关浏览器渲染规则了。我们在看相关教程的时候不会给你讲这么深层次的东西，那么今天我就将我发现的问题写一下。首先浏览器渲染机制，肯定是从外向内渲染的，也就是从HTML标签开始渲染，那为什么body的高度是0，整个屏幕还是会显示出body的背景颜色呢？在某些教程上只会给你说，HTML是一个页面是HTML页面的标识，证明这个页面是HTML页面，但很少会提到，他就是HTML的根节点。也就是css中的继承机制，他会 一直找到你父类继承，如果你父类有这个样式，那么好，我也设置成这个样式，但是浏览器在读背景颜色的时候他会优先读HTML标签的背景颜色，没有的话，他会把body当做整个文档的根节点来读。所有才会发现即使body高度是0还是会显示整个网页的背景颜色。
那么到这里，问题是不是可以解决了？既然我们知道body是浏览器万不得已之下当做的根节点，那么我们可以给HTML的宽高设置100%来看看效果。你会发现body的颜色不会再显示出来了。相反，如果我们给body加了继承会是什么情况呢（宽高）？哎，发现又会显示body的颜色。对的这就是CSS全名是层叠样式（Cascading Style Sheets）表最好的解释了。子类会覆盖父类的一些属性，让其显示不出来，但是还是存在的。所有<html></html>才是HTML的根节点，想要设置百分比来自适应布局就必须搞清楚你所设置元素的父类是干什么的。ok。现在你可以设置你的div为100%来铺满整个屏幕咯。TIP小提示：如果你用的是谷歌浏览器，在设置之前将HTML和body的margin和padding都设置为0px.就不会出现缝隙了。
下一篇文章：介绍什么是行内元素什么是块元素。（也就是为什么body和html会有默认宽为100%占满整个屏幕的原因），明天见！
