Css宽度超过100%

Question

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

.class{
    width: 102%;
}

Answer 1

根据CSS 2.1规范,所有非负值都适用于宽度,包括100%以上的百分比值.

Answer 2

百分比值仅表示元素容器长度的百分比.超过100%的百分比是完全有效的,但是0%以下的百分比不是(0%总是等于长度0).

假设你有一个div宽度为100px 的元素.在该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的CSS值和单位模块3级:

百分比值表示为<percentage>,由<number>紧跟百分号'%'组成.它对应于语法中的PERCENTAGE标记.

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