Pregunta Ancho de css por encima del 100%


¿Es correcto especificar un ancho superior al 100%?

.class{
    width: 102%;
}

16
2018-05-29 13:36


origen


Respuestas:


Según la Especificación CSS 2.1, todos los valores no negativos son válidos para el ancho, que incluye valores porcentuales superiores al 100%.


17
2018-05-29 13:40



Los valores de porcentaje simplemente representan un porcentaje de la longitud del contenedor del elemento. Un porcentaje por encima del 100% es completamente válido, sin embargo, un porcentaje por debajo del 0% no es (como 0% siempre será igual a una longitud de 0)

Digamos que tienes un div elemento que tiene 100 px de ancho Dentro de eso div elemento es un p elemento en el que está poniendo un porcentaje de ancho, ocurrirá lo siguiente:

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)

Desde el W3 Módulo de Valores y Unidades CSS Nivel 3:

Un valor porcentual se denota por<percentage>, consiste en un <number> seguido inmediatamente por un signo de porcentaje '%'. Corresponde al token de PERCENTAGE en la gramática.

Los valores porcentuales siempre son relativos a otro valor, por ejemplo, una longitud. Cada propiedad que permite porcentajes también define el valor al que se refiere el porcentaje. El valor puede ser el de otra propiedad para el mismo elemento, una propiedad para un elemento ancestro o un valor del contexto de formato (por ejemplo, el ancho de un bloque contenedor). Cuando se establece un valor porcentual para una propiedad del elemento raíz y el porcentaje se define como una referencia al valor heredado de alguna propiedad, el valor resultante es el porcentaje multiplicado por el valor inicial de esa propiedad.


12
2018-05-29 13:42