css 几种常见的百分比设置和使用，百分比是相对哪个元素或属性的比例

前端写样式时我们为了满足自适应通常会使用百分比来设置元素的宽高间距等，只有明确的知道设置百分比是相对哪个元素的哪个属性而言的才能正确的得到期望的效果。

说在前面，包含块的W3C解释

1.width:相对包含块（父元素）的width

width定义为50%即为父元素宽度的50%，有时候我们可能会定义width为100%，但是发现实际上该元素的宽度是被其子元素的宽度撑大了，这时候就需要注意其父元素是不是设置了width,如果没有就会出现这种情况。
注意：如果设置宽度为百分比的元素同时设置了position:absolute/fixed，则其包含块，就不能简单的理解为其父元素了。其中定位为fixed时其包含块可以理解为视图窗口，定位为absolute时，其包含块为离其最近的定位为relative/absolute/fixed的祖先元素。具体参考W3C

2.height:相对其包含块的高度

3.margin:相对其包含块的width（元素设置了定位时其包含块的定义参考第1条的注意点)
注意：这里无论是margin-left/right/top/bottom设置为百分比时都是相对其父元素的宽度的百分比。具体参考W3C

4.padding:相对于包含块的width（元素设置了定位时其包含块（这里说的父元素）的定义参考第1条的注意点)

同样无论是padding-left/right/top/bottom设置为百分比时都是相对其父元素的宽度的百分比，参考W3C