浅谈CSS中的百分比

本文介绍了浅谈CSS中的百分比，分享给大家，具体如下：

结论：

标准流中的元素，看其属性有没有继承性。对于width和margin-left，它是可以继承的，它会参照父元素或者祖先元素（其实是包含块）；对于height，它没有继承性，父元素或者祖先元素会自适应其所有子元素的高度和（这点是需要注意的）。 绝对定位参照的是离它最近的父元素或祖先元素，如果没有父元素或祖先元素，那么参照的是初始包含块（不同的浏览器可能不一样，因为W3C没有规定浏览器具体如何去实现）。但实际上，大部分浏览器将可视区当作绝对定位的包含块。 固定定位参照可视区

width设置成百分比

一般子元素通常将继承父元素计算过的值当作百分比的参照，对于不可继承的属性和根元素，则使用初始值作为参照

比如.box没有设置宽度，但默认继承了body计算过的值，又因为.box是.item的父元素，因此.item又继承了.box计算过的值。当一个块级元素不设置宽度时，则它的宽度默认为全屏，就是因为它继承了包含块的宽度。

height设置成百分比

结论

高度设置成百分比时，高度不像宽度一样会继承父元素或者祖先元素，相反，父元素或者祖先元素会根据子元素的实际高度（高度计算值）来自适应，一般为所有子元素的内容加起来的高度和。而子元素会根据文字行高来设置高度具体值（在子元素高度不设置具体值的情况下）。对于有absolute定位的元素，其高度为百分比时会参照父元素或祖先元素的高度，绝对定位参照的是离它最近的父元素或祖先元素，如果没有父元素或祖先元素，那么参照的是初始包含块（不同的浏览器可能不一样，因为W3C没有规定浏览器具体要如何实现）。但实际上，大部分浏览器将可视区当作绝对定位的包含块。

我们一般喜欢将宽度设置成百分比，但在将高度设置成百分比的时候要注意。

html为什么会出现height等于21呢？是不是这21是从祖先元素继承过来的？当我们把body的高度设置成100%结果还是一样。其实这里的高度为行高的高度，也就是说，在高度为0或者不设置高度的情况下，高度是文字的行高，当我们在.box中加上line-height:20px;时，box,body和html的高度都会变成20px;当我们把.box高度设置成具体值时：