css样式可以使⽤百分⽐的属性--总结
css样式可以使⽤百分⽐的属性–总结
可以使⽤百分⽐的样式属性:
定位：top,right,bottom,left;
盒模型：height,width,margin,padding,
背景：background-position,background-size(),
⽂本：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
margin属性值可以为百分比
{
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 值。
不⾜的地⽅或者缺省的地⽅，希望各路⼤神补充

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。