CSS <percentage>数据类型用于表示一个百分比数值。百分比数值的格式是一个<number>后面跟一个%号,数字和%之间不带空格。
很多长度相关的属性都使用百分比数值,例如width
、margin
和padding
属性。百分比属性也被用于font-size
属性,此时,字体大小是相对于它的父元素的字体大小。
百分比值总是相对于其它的值。百分比值相对于的值可以是它的父元素的值,或者是元素本身的其它属性的值。例如,某个元素的宽度设置为50%,表示它的宽度是相对于它的父元素的宽度的50%。另外,如果某个元素的行高(line-height)属性设置为百分比值的话,这个值是相对于元素的字体大小(font-size)来计算的。
需要注意的是,百分比值不能够级联,通过继承关键字继承下来的属性是通过计算之后得到的实际数值。也就是说,一个元素的某个属性通过inherit
关键字继承自它的父元素,它实际继承的值不是一个百分比数值,而是经由这个百分比值和它相对的属性的值经过计算后得到的实际数值。例如,父元素的字体大小为10像素,行高属性为120%,
.parent { font-size: 10px; line-height: 120%;/* 'font-size'的120% */ }
因为值为百分比的行高属性的值是相对于该元素的字体大小来计算的,所以父元素的行高为12像素。那么它的子元素通过inherit
关键字继承下来的行高是12像素,而不是120%。
示例代码
下面的示例代码设置一个元素的宽度为它的父元素宽度的50%。行高150%表示行高等于它的字体大小的150%。
.child { width: 50%; font-size: 16px; line-height: 150%; }
在线演示
700像素宽的父容器。
父容器中没有设置字体尺寸,它从其父元素中继承字体大小。它的父元素的字体大小为18像素。
这是一个子元素,宽度为父元素宽度的一半。
子元素的字体大小从它的父元素中继承,为100%父元素字体大小=18px。
这是二级子元素,宽度为它的直接父元素的75%。
字体大小为75%,表示它的字体大小 = 18px * 75% = 13.5像素。
浏览器支持
所有的浏览器都支持<percentage>
数据类型,包括:Chrome, Firefox, Safari, Opera, IE以及Android 和 iOS。