1. Unidad de longitud en CSS
En CSS, muchos valores usan la longitud como valor. Los atributos del modelo de caja son algunos atributos de valor obvios: ancho, alto, margen, relleno y borde. Además , hay muchos atributos CSS cuyos valores también son valores de longitud, como el desplazamiento, el tamaño de la sombra del cuadro o el tamaño de fuente, el espaciado, etc. Hay muchas unidades de longitud en CSS, las discutiremos a continuación. sobre unidades de longitud y sus usos.
2. Una breve introducción (¿cuáles son las unidades de longitud?)
Hay dos tipos de unidades de longitud en CSS: longitud absoluta y longitud relativa .
Longitud absoluta: px, in, cm, mm, pt, pc;
Longitud relativa: em, rem, ex, vh, vw, vmin, vmax, %, fr.
3. Introducción detallada
1. Unidad absoluta de longitud
La unidad de longitud absoluta representa un tamaño físico real. Su tamaño es fijo y no cambiará debido a cambios en el tamaño de otros elementos. La siguiente tabla enumera las unidades de longitud absoluta admitidas en CSS.
px: representa píxeles. Los píxeles son relativos a la resolución de la pantalla. La página se muestra en píxeles precisos y no cambiará debido a cambios en el tamaño de otros elementos. Los píxeles siguen siendo la unidad de medida más típica, por ejemplo: para Windows La resolución. La resolución utilizada por los usuarios de Mac es de 96 píxeles/pulgada, mientras que la resolución utilizada por los usuarios de Mac es generalmente de 72 píxeles/pulgada. , la unidad en el lenguaje JavaScript general es el píxel utilizado.
div{ancho:200px;}in: pulgadas es un archivo de medidas físicas, pero en el campo CSS, pulgadas simplemente se asigna directamente a píxeles. (1 pulgada == 2,54 cm == 96 píxeles)
div{ancho:2pulg;}c m: El centímetro es una unidad de medida física familiar y útil. También está mapeado en píxeles. (1 cm == 37,8 px)
div{ancho:20cm;}mm: El milímetro es una unidad física de medida de pequeño orden de magnitud. (1 mm == 0,1 cm == 3,78 píxeles)
div{ancho:200 mm;}p t: Los puntos también son unidades físicas de longitud. (1 punto == 1/72 pulg. == 96/72 px)
div{ancho:20pt;}pc: Pica es lo mismo que puntos, excepto (1pc == 12pt).
div{ancho:20pt;}Ejemplo:
<!DOCTYPEhtml><html><head><title>Unidad de longitud absoluta</title><style>.box{ancho:4 pulgadas;alto:4,5 cm;borde:2 mmsolidblack;font-size:16px;}.pt{font {tamaño de fuente: 2pt;}.pc{font-size:3pc;}</style></head><body><divclass=box>Esta es una fuente de 16px<pclass=pt>Esta es una fuente de 2pt</p><pclass =pc>Esta es la fuente de 3pc</p></div></body></html>Los resultados presentados son los siguientes:
2. Unidad de longitud relativa
La unidad de longitud relativa significa que esta unidad no tiene un valor fijo. Su valor se ve afectado por otros atributos del elemento (como el tamaño de la ventana del navegador y el tamaño del elemento principal). La unidad de longitud relativa es muy adecuada para la respuesta. diseño. La siguiente tabla enumera las unidades de longitud relativa admitidas en CSS.
em: em es una unidad relativa, relativa al tamaño de fuente del texto dentro del objeto actual. Si no se ha configurado el tamaño de fuente dentro de la fila actual, es relativo al tamaño de fuente predeterminado del navegador. Inicialmente, la medida de composición se basa en el tamaño de la letra mayúscula M de la fuente actual. Cuando se cambia la familia de fuentes, su tamaño no cambiará, pero cuando se cambia el tamaño de fuente, sí cambiará. em heredará el tamaño de fuente del elemento principal. (Hay ejemplos de em y rem a continuación)
Sin reglas CSS: (1em == 16px == 0.17in == 12pt == 1pc == 4.2mm == 0.42cm)
div{ancho:40em;}re em: rem es una unidad relativa como em, pero a diferencia de em, rem siempre es relativo al elemento raíz (como: root {}), a diferencia de em, que utiliza el método en cascada para calcular el tamaño. Esta unidad relativa es más sencilla de utilizar.
div{ancho:40rem;}Ej: Unidad de longitud relativa, relativa a la altura del carácter. Tamaño de fuente predeterminado. A diferencia de em, em no cambiará cuando se cambie la familia de fuentes, pero la unidad ex cambiará porque el valor de una unidad y esa fuente tienen una relación de restricción especial.
div{ancho:40ex;}ch: La connotación de ch es similar a la altura de ex en relación con x, excepto que ch se basa en el ancho del carácter 0 en lugar de la altura del carácter x. 1ch es el ancho del número 0. Cuando cambia la familia de fuentes, ch también cambiará.
div{ancho:40ch;}vw: vw (ancho del punto de vista) es la unidad de ancho visual (ancho de la ventana). 1vw es igual al uno por ciento del ancho del área visual. La unidad vw es muy similar al porcentaje. de vw se aplican a todos los elementos. Lo mismo, independientemente de su elemento principal o del ancho del elemento principal, un poco como las unidades rem siempre son relativas al elemento raíz. (Hay ejemplos de vh y vw a continuación)
div{ancho:40vw;}vh: Las unidades de vh (altura de la ventana gráfica) y vw (ancho de la ventana gráfica) son las mismas. La diferencia entre vh es relativa a la altura del área visual (altura de la ventana).
div{ancho:40vh;}vmin: el valor de vmin es el valor más pequeño entre vw y vh actuales. En el ejemplo de uso del tipo de tamaño estándar, en comparación con las unidades vw y vh que determinan el tamaño de la pantalla usted mismo, vmin es una métrica más útil.
div{ancho:40vmin;}vmax: el valor de vmax es el valor mayor entre vw y vh.
div{ancho:40vmax;}%: Porcentaje, el valor de longitud en porcentaje se basa en el valor de longitud del elemento principal con el mismo atributo. Por ejemplo: si el ancho de un elemento es 450 px y el ancho del elemento secundario se establece en 50%, entonces el valor de longitud en porcentaje se basa en el valor de longitud del elemento principal con el mismo atributo. Se representa el elemento secundario. El ancho es 225px. (Si no se establece ningún valor específico para todos los elementos principales, establecer el porcentaje de altura hará que el valor de todos los elementos sea 0).
div{ancho:40%;}fr: unidad de longitud utilizada en el diseño de cuadrícula. En el diseño de cuadrícula, a menudo usamos fr para el cálculo.
La siguiente declaración declara una cuadrícula con tres líneas. La altura de la primera línea es de 30 px, la altura de la segunda línea también es de 30 px y la altura de la tercera línea es de 60 px.
filas-plantilla-cuadrícula:30px1fr2fr;
Ejemplo:
<!DOCTYPEhtml><html><head><title>Unidad de longitud relativa</title><style>.box{width:60vw;height:88vh;border:1exsolidblack;font-size:16px;}.info{font- tamaño:2em;}.ex>span{font-size:3ex;}.ch>span{fon t-size:4ch;}</style></head><body><divclass=box>Esta es una fuente de 16px<pclass=info>Esta es una fuente de 2em</p><pclass=ex>x:< span>Esta es la fuente de 3ex</span></p><pclass=ch>0: <span>Esta es la fuente de 4ch</span></p></div></body></ HTML>Se muestra a continuación:
3. Resumen de unidades de longitud:
(1) En primer lugar, debemos entender una cosa, es decir, ¿cuál es exactamente la resolución de la pantalla? Sabemos que bajo diferentes resoluciones, el tamaño de los píxeles es diferente, por lo que la misma página web está en px. Cuando se utilizan como unidades de longitud, los tamaños mostrados son diferentes en diferentes resoluciones. A resoluciones bajas, los píxeles son más grandes y los detalles no son lo suficientemente claros. Aunque la página mostrada también es grande, está borrosa.
(2) De hecho, todas las unidades, ya sean relativas o absolutas, (cuando se muestran en la pantalla) eventualmente se convierten en unidades px, por lo que, en términos generales, al crear páginas web, la unidad básica Elija px en lugar de pt, porque pt es también se convierte a px para mostrarlo a través del DPI del navegador (por ejemplo, el DPI de Firefox es 96, luego 9pt = 12px). No solo pt, cm, in, mm y otras unidades también se convierten a px, por lo que ya sea absoluto o relativo, cambiará en diferentes resoluciones. No crea que si la longitud se establece en 3 cm, cambiará en. diferentes resoluciones. La resolución permanece sin cambios en 3 cm.
(3) Creo que pt sigue siendo una unidad muy útil, especialmente al imprimir. Ahora se han implementado algunas páginas web para mostrar una página e imprimir de otra manera. Bueno, porque para diferentes resoluciones, las páginas impresas son todas del mismo tamaño. Esta es la primera característica de la unidad absoluta, pero aún hay que recordar que en la pantalla esta unidad no representa la longitud física real. debe ajustarse de acuerdo con el tamaño real del píxel (esto está relacionado con la resolución).
(4) De hecho, podemos entenderlo de esta manera: consideramos px como una unidad absoluta (unidad absoluta en la pantalla), y otras unidades se basan en él, como em, que es la altura relativa a la fuente del texto actual ( Supongamos que el tamaño de fuente del texto actual es 12 px y configuramos la nueva fuente en 1,5 em, luego el nuevo tamaño de fuente se convierte a 12 * 1,5 = 18px), lo que debes recordar es que em es la altura relativa al elemento principal. Supongamos que configuramos la fuente en 12px en el primer div, 1,5 em en el segundo nivel y 1,5 em en el tercer nivel. La visualización de la fuente es: primer nivel 12 px, segundo nivel 18 px, tercer nivel 18 * 1,5 = 27 px.