CSS宽度超过100%

Question

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

.class{
    width: 102%;
}

- grigno

---

有什么问题吗？这就是滚动条的作用：如果宽度超过屏幕尺寸。 - Hanky Panky

风格与语义无关，这正是问题所在。指定超过100%宽度是完全可以的，甚至不算是一个技巧。 - Fabrizio Calderan

我只想知道是否正确编写了一个宽度大于100%的CSS。 - grigno

@grigno 这并不是对或错的问题，完全取决于开发者。如果你担心浏览器无法正确呈现它，那么放心，浏览器会正常渲染它。 - mituw16

@grigno 如果这是你想要实现的效果，那就没问题。所以是正确的。 :) - Fabrizio Calderan

@FabrizioCalderan 我使用过它，效果正是我想要的，只是我想知道这个属性是否符合 CSS 规范。再见！ - grigno

Answer 1

是的，根据CSS 2.1规范，所有非负值都是有效的宽度值，包括超过100%的百分比值。

- Etheryte

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的CSS值和单位模块3级:

百分比值由<percentage>表示，包括紧接着的百分号“%”<number>组成。它对应于语法中的PERCENTAGE标记。

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

- James Donnelly