css中用到百分比的属性

标签：

CSS的属性值中经常会出现百分比，搞清它们的基数是一件很重要的事情。我特意查看了一下W3C的CSS2.1标准，在此整理下：

百分比单位

乘以包含块的宽度margin，padding，left，right，text-indent，width，max-width，min-width

乘以包含块的高度top，bottom，height，max-height，min-height

关于包含块（含块）的概念，不能简单地理解成是父元素。如果是静态定位和相对定位，包含块一般就是其父元素。但是对于绝对定位的元素，包含块应该是离它最近的position为absolute，relative，或者fixedof祖先元素。对固定定位的元素，它的包含块是视口（viewport）。具体可以参考W3Help。

乘以元素的字体大小line-height

乘以元素的行高vertical-align

背景定位中的百分比background-position分别设置水平方向和垂直方向上的两个值，如果使用百分比，那么百分比值会同时应用于元素和图像。例如50％50％会把图片的（50％，50 ％）这一点与框的（50％，50％）处对齐，相当于设置了中心。同理0％0％相当于左上，100％100％相当于右下。

字体大小中的百分比font-size中的百分比值应该乘以元素所继承到的字体大小，也就是父元素的字体大小。

其他字体单位既然说到了字体大小，顺便八一八其他的字体单位吧，有些可能平时并不会用，但是了解一下也没有坏处。有两个相对单位是：

em--相当于当前的字体高度，称作“全身方框”（em square）。如果在font-size上使用这个单位，应该乘以父元素的字体大小。用在font-size之外的属性上，则应该乘以元素自身的字体大小.ex--相当于字体中的“x”的高度。以下是绝对单位：

in--英寸（inch），相当于2.54cm.cm--厘米（厘米）.mm--毫米（毫米）.pt--磅（point）.1pt相当于1in的1/72。pc--皮卡（异食癖）.1pc = 12pt.px--像素（像素单位）.1px = 0.75pt。

百分比的继承：

如果某个元素设置了百分比的属性，则后代元素继承的是计算后的值例如：

p {font-size：10px} p {line-height：120％} /  120％'font-size'  /那么p的子元素继承到的值是line-height：12px，而不是line-height：120 ％。

CSS属性之中经常出现的百分比（转）

标签：

原文地址：HTTP：//www.cnblogs.com/shouce/p/5457162.html

http://www.mamicode.com/info-detail-1315056.html