Css宽度超过100％

Question

指定宽度大于100％是否正确？

.class{
    width: 102%;
}

Answer 1

根据the CSS 2.1 Specification，所有非负值都适用于宽度，包括100％以上的百分比值。

Answer 2

百分比值仅表示元素容器长度的百分比。超过100％的百分比完全有效，但0％以下的百分比不是（因为0%总是等于0的长度。）

假设你有一个宽度为100px的div元素。在div元素中，p元素是您放置百分比宽度的，会发生以下情况：

width: 0%;                         // 0px (0% of 100px)
width: 10%;                        // 10px (10% of 100px)
width: 100%;                       // 100px (100% of 100px)
width: 110%;                       // 110px (110% of 100px)
width: 200%;                       // 200px (200% of 100px)
width: 1000%;                      // 1000px (1000% of 100px)

来自W3＆＃39; CSS Values and Units Module Level 3：

  

百分比值由<percentage>表示，由<number>后跟百分号'％'组成。它对应于语法中的PERCENTAGE标记。

     

百分比值始终相对于另一个值，例如长度。允许百分比的每个属性还定义百分比所引用的值。该值可以是同一元素的另一个属性的值，祖先元素的属性或格式化上下文的值（例如，包含块的宽度）。当为根元素的属性设置百分比值并且百分比被定义为引用某个属性的继承值时，结果值是该属性的初始值的百分比乘以。