前端

百分比 | <percentage> (Values & Units) – CSS 中文开发手册 – Break易站

云博小周宇1 Min Read 
  • ??CSS 中文开发手册

    百分比 | <percentage> (Values & Units) – CSS 中文开发手册

    <percentage>CSS数据类型代表百分比值。许多CSS属性可以<percentage>取值，通常可以定义相对于其父元素的大小。众多CSS属性可以使用百分比类型，例如width，margin，padding，和font-size。

    注意：只有计算值可以被继承。因此，即使在父属性上使用的是百分比值，但在继承的属性上访问到的却是实际值（如以像素为单位的<length>值），而不是百分比值。

    语法

    percentage由一个<number>和其后的百分号%组成。和所有的CSS单位一样，符号和数字之间没有空格。

    线性插值

    在animation中，百分比作为实浮点数被插入。插值速度由与动画相关的timing函数决定。

    实例

    宽度和左边距

    <div style="background-color:blue;"> 
  <div style="width:50%;margin-left:20%;background-color:lime;">
    Width: 50%, Left margin: 20%
  </div> 
  <div style="width:30%;margin-left:60%;background-color:pink;">
    Width: 30%, Left margin: 60%
  </div> 
</div>

    上面的HTML将输出：

    字号

    <div style="font-size:18px;">
  <p>Full size text (18px)</p>
  <p><span style="font-size:50%;">50%</span></p>
  <p><span style="font-size:200%;">200%</span></p>
</div>

    上面的HTML将输出：

    规范

    Specification

    Status

    Comment

    CSS Values and Units Module Level 3The definition of ‘<percentage>‘ in that specification.

    Candidate Recommendation

    No significant change from CSS Level 2 (Revision 1).

    CSS Level 2 (Revision 1)The definition of ‘<percentage>‘ in that specification.

    Recommendation

    No change from CSS Level 1.

    CSS Level 1The definition of ‘<percentage>‘ in that specification.

    Recommendation

    Initial definition.

    浏览器兼容性

    Feature

    Chrome

    Firefox (Gecko)

    Internet Explorer

    Opera

    Safari (WebKit)

    Basic support

    1.0

    1.0 (1.7 or earlier)

    (Yes)

    (Yes)

    1.0 (85)

    Feature

    Android

    Firefox Mobile (Gecko)

    IE Phone

    Opera Mobile

    Safari Mobile

    Basic support

    (Yes)

    (Yes)

    (Yes)

    (Yes)

    (Yes)

    		 
  • ??CSS 中文开发手册

  • ??本文标题：
    百分比 | <percentage> (Values & Units) – CSS 中文开发手册 – Break易站 转载请保留页面地址：https://www.breakyizhan.com/css/32139.html