css样式可以使用百分比的属性--总结

css样式可以使用百分比的属性–总结

可以使用百分比的样式属性: 
定位：top,right,bottom,left; 
盒模型：height,width,margin,padding, 
背景：background-position,background-size(CSS3), 
文本：text-indent， line-height
字体：font-size;

各个属性使用详细： 

top,right,bottom,left:全兼容, 当position:relative,top,bottom百分比基于父元素的高度；left,right百分比基于父级宽度。

当position:absolute,top,bottom百分比基于static 定位以外的第一个父元素的高度；left,right百分比基于static 定位以外的第一个父元素的宽度。

当position:fixed,top,bottom百分比基于浏览器窗口的高度；left,right百分比基于浏览器窗口的宽度。

height：基于包含它的块级对象的百分比高度。 
width：基于包含它的块级对象的百分比宽度。 
margin：百分数是相对于父元素的 width 计算的。 writing-mode垂直流时以height计算
padding：百分数是相对于父元素的 width 计算的。writing-mode垂直流时以height计算

background-position:图像中描述为 50% 50% 的点（中心点） 
如果图像位于 0% 0%，其左上角将放在元素内边距区的左上角。 
如果图像位置是 100% 100%，会使图像的右下角放在右边距的右下角。 
因此，如果你想把一个图像放在水平方向 2/3、垂直方向 1/3 处，可以这样声明： 
body 
{ 
background-image:url(‘/i/eg_bg_03.gif’); 
background-repeat:no-repeat; 
background-position:66% 33%; 
} 
如果只提供一个百分数值，所提供的这个值将用作水平值，垂直值将假设为 50%。这一点与关键字类似。 
background-position 的默认值是 0% 0%，在功能上相当于 top left。这就解释了背景图像为什么总是从元素内边距区的左上角开始平铺，除非您设置了不同的位置值。

background-size 兼容IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 支持 background-size 属性。 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 “auto”。

text-indent 定义基于父元素宽度的百分比的缩进。当外层不指定宽度时，ie下会基于浏览器宽度。 

line-height 为百分比如200%时基于自身（font-size:18px）子元素为18*200%=36px；为数值如1.5时是子元素的字体大小的1.5倍

font-size在所有浏览器中均有效的方案是为 body 元素（父元素）以百分比设置默认的 font-size 值。

不足的地方或者缺省的地方，希望各路大神补充