Parámetros de ancho y alto de CSS para configurar los tamaños de los elementos de la página html. El texto se muestra utilizando una fuente descargable. opciones de colocación flotante en css
De forma predeterminada, los elementos de bloque usan ancho automático. Esto significa que el elemento se estirará horizontalmente exactamente tanto como está espacio libre. La altura predeterminada de los elementos del bloque se establece automáticamente, es decir El navegador extiende el área de contenido verticalmente para que se muestre todo el contenido. Para establecer dimensiones personalizadas para el área de contenido de un elemento, puede utilizar las propiedades de ancho y alto.
La propiedad de ancho de CSS le permite establecer el ancho del área de contenido del elemento y la propiedad de altura le permite establecer la altura del área de contenido:
Tenga en cuenta que las propiedades de ancho y alto definen únicamente el tamaño del área de contenido para calcular el ancho total. elemento de bloque, debe agregar el ancho del área de contenido, el relleno izquierdo y derecho y el ancho del marco izquierdo y derecho. Lo mismo ocurre con la altura total del elemento, solo que todos los valores se calculan verticalmente:
Para este párrafo, estableceremos solo el ancho y el alto.
Este párrafo contiene, además del ancho y el alto, relleno, borde y margen.
Intentar "
El ejemplo muestra claramente que el segundo elemento ocupa más espacio que el primero. Si calculamos usando nuestra fórmula, entonces las dimensiones del primer párrafo son 150x100 píxeles y las dimensiones del segundo párrafo son:
| Altura total: | 5px | + | 10px | + | 100px | + | 10px | + | 5px | = 130px |
| arriba marco | superior sangría | altura | más bajo sangría | más bajo marco |
es decir, 180x130 píxeles.
Desbordamiento de elementos
Una vez que haya determinado el ancho y el alto de un elemento, debe prestar atención a un punto importante: el contenido ubicado dentro del elemento puede exceder tamaño especificado bloquear. En este caso, parte del contenido irá más allá de los límites del elemento. Para evitar este momento desagradable, puede utilizar la propiedad de desbordamiento de CSS. propiedad de desbordamiento le dice al navegador qué hacer si el contenido de un bloque excede su tamaño. Esta propiedad puede tomar uno de cuatro valores:
- visible: el valor predeterminado utilizado por el navegador. Establecer este valor tendrá el mismo efecto que no establecer la propiedad de desbordamiento.
- desplazamiento: agrega barras de desplazamiento verticales y horizontales a un elemento.
- auto: agrega barras de desplazamiento si es necesario.
- oculto: oculta parte del contenido que se extiende más allá de los límites del elemento de bloque.
Vlad Merzhevich
Cualquier elemento de bloque consta de un conjunto de propiedades, como hojas de col superpuestas entre sí. La base del bloque es su contenido (puede ser texto, imagen, etc.), cuyo ancho se especifica mediante la propiedad ancho y la altura por altura; Hay relleno alrededor del contenido, crean un espacio vacío desde el contenido hasta borde interior límites; luego vienen los propios bordes (borde) y el bloque se completa con márgenes (margen), el espacio vacío invisible del borde exterior de los bordes. El ancho del bloque es un valor complejo y consta de varios valores de propiedad:
- ancho - ancho del contenido, es decir bloquear contenidos;
- padding-left y padding-right: margen a la izquierda y a la derecha del contenido;
- borde izquierdo y borde derecho: grosor del borde izquierdo y derecho;
- margen izquierdo y margen derecho: margen izquierdo y derecho.
Es posible que falten algunas propiedades, en cuyo caso el ancho no se ve afectado. El ancho total se muestra en la Fig. 1 como una línea de puntos negra.
Arroz. 1. Ancho del bloque
Si no se especifica el ancho, el valor predeterminado es auto . En este caso el ancho del bloque ocupará todo el ancho disponible manteniendo los valores de márgenes, bordes y relleno. Bajo el ancho disponible en en este caso esto significa el ancho del contenido del bloque principal y, si no hay ningún padre, entonces el ancho del contenido del navegador.
Digamos que el siguiente estilo está escrito para una capa.
Ancho: 300 píxeles; /* Ancho de capa */ margin: 7px; /* Valor de relleno */ borde: 4px negro sólido; /* Opciones de borde */ padding: 10px; /* Márgenes alrededor del texto */
El ancho de la capa según esta entrada será igual a 342 píxeles, este valor se obtiene sumando el valor del ancho del contenido más el relleno izquierdo, el borde izquierdo y el margen izquierdo, más el margen derecho, el borde derecho y el relleno derecho. Resumamos todos los números.
Ancho = 300 + 7 + 7 + 4 + 4 + 10 + 10 = 342
Cabe señalar que el modelo de bloque con formación de ancho conlleva muchos inconvenientes. Tienes que hacer cálculos constantemente cuando necesitas establecer un determinado ancho de bloque. Los problemas también comienzan a la hora de combinar diferentes unidades mediciones, particularmente porcentajes y píxeles. Supongamos que el ancho del contenido está establecido en 90%, si sumamos los márgenes y bordes especificados en píxeles, entonces es imposible calcular el ancho total del bloque, ya que los porcentajes no se traducen directamente a píxeles. Esto puede provocar que el ancho total del bloque exceda el ancho de la página web, lo que provocará que aparezca una barra de desplazamiento horizontal. Hay dos formas de salir de esta situación: cambiar el algoritmo modelo de bloque y utilizar capas anidadas.
Algoritmo de modelo de bloques
Como ya se mencionó, el ancho del bloque se forma a partir del ancho del contenido y los valores de márgenes, bordes y relleno. en el navegador Explorador de Internet El algoritmo cambia automáticamente y el ancho de todo el bloque se establece igual al ancho. Otros navegadores no cambian el algoritmo tan fácilmente y, además, sabes que el modo de compatibilidad es malo. CSS3 tiene una maravillosa propiedad de tamaño de caja que nos resultará útil. Cuando se establece en border-box, el ancho comienza a incluir márgenes y bordes, pero no relleno. Por lo tanto, al conectar el tamaño del cuadro con el valor del cuadro de borde a nuestro estilo, podemos establecer el ancho como un porcentaje y especificar de forma segura el borde y el relleno sin temor a que el ancho del bloque cambie. Lamentablemente, existe un pequeño problema con esta propiedad, como suele ocurrir con los navegadores: no todos los navegadores la comprenden. Me alegra que los navegadores al menos admitan propiedades específicas del navegador. en la mesa 1 muestra la compatibilidad con el navegador.
| Navegador | Explorador de Internet | Cromo | Ópera | Safari | Firefox |
|---|---|---|---|---|---|
| Versión | 8.0+ | 2.0+ | 7.0+ | 3.0+ | 1.0+ |
| Propiedad | tamaño de caja | -tamaño-de-caja-webkit | tamaño de caja | -tamaño-de-caja-webkit | -tamaño-de-caja-moz |
Como puedes ver en la tabla, hay confusión y vacilación en las propiedades, por lo que tendrás que hacer un híbrido e indicar las tres propiedades (ejemplo 1).
Ejemplo 1: ancho de bloque
HTML5 CSS3 IE Cr Op Sa Fx
Este ejemplo funcionará en todos los navegadores enumerados en la tabla. 1, sin embargo no es válido en CSS3 debido al uso propiedades no estándar comenzando con -moz y -webkit. El ancho del bloque es del 100%, incluidos los valores de relleno. Sin la propiedad box-sizing aparecerá en el navegador raya horizontal voluta.
Capas anidadas
Usar la propiedad box-sizing es bueno para todos, excepto que no funciona en versiones anteriores de IE. Si está diseñando un sitio web teniendo en cuenta IE7 e IE6, el viejo servirá método probado con capas de anidación. La idea es simple: para el elemento del bloque exterior, solo se establece el ancho requerido, y para el bloque anidado, se establece todo lo demás: márgenes, bordes y relleno. Dado que el ancho predeterminado de un bloque es igual al ancho disponible de su padre, los bloques en cierto sentido se superpondrán entre sí, pero el ancho real del elemento combinado estará claramente definido. El ejemplo 2 muestra el uso de capas anidadas.
Ejemplo 2: capas anidadas
HTML5 CSS 2.1 IE Cr Op Sa Fx
El resultado de este ejemplo se muestra en la Fig. 2.
Arroz. 2. Ancho de bloque en porcentaje
La ventaja de las capas anidadas es el uso de sangrías (el tamaño del cuadro no las tiene en cuenta), la versatilidad del método y el hecho de que el fondo se puede agregar a una capa particular si se desea. Esto cambia un poco apariencia elementos, esto es especialmente cierto al encender imágenes de fondo. Entre las desventajas del método, se puede destacar la inclusión de un bloque adicional, lo que complica la estructura del código, especialmente si el método se utiliza con frecuencia. Pero esto puede considerarse una pequeña cosa en comparación con los beneficios.
Para establecer dimensiones varios elementos CSS utiliza unidades de medida absolutas y relativas. Unidades absolutas son independientes del dispositivo de salida y las unidades relativas determinan el tamaño de un elemento en relación con el valor de otro tamaño.
Unidades relativas
Unidades relativas Normalmente se utiliza para trabajar con texto. en la mesa 1 enumera las principales unidades relativas.
La unidad em es un valor variable que depende del tamaño de fuente del elemento actual (el tamaño se establece mediante propiedad de estilo tamaño de fuente). Cada navegador tiene un tamaño de texto incorporado que se utiliza cuando este tamaño no se especifica explícitamente. Por lo tanto, inicialmente 1em igual al tamaño fuente o tamaño de fuente predeterminado del navegador elemento padre. La notación porcentual es idéntica a em, en que los valores de 1em y 100% son iguales.
La unidad ex se define como la altura del carácter "x" en minúscula. ex está sujeto a las mismas reglas que em , es decir, que está vinculado al tamaño de fuente predeterminado del navegador o al tamaño de fuente de su elemento principal.
La unidad ch es igual al ancho del carácter "0" del elemento actual y, como em, depende del tamaño de fuente.
La diferencia entre em y rem es la siguiente. em depende del tamaño de fuente del elemento principal y cambia con él, y rem está vinculado a elemento raíz, es decir, el tamaño de fuente especificado para el elemento html.
También hay un grupo de unidades relativas vinculadas al tamaño de la ventana gráfica del navegador. en la mesa 2 muestra una lista de ellos con una descripción.
Unidades absolutas
Las unidades absolutas son dimensiones fisicas- pulgadas, centímetros, milímetros, puntos, picas y píxeles. Para dispositivos con bajos ppp (el número de píxeles por pulgada determina la densidad de píxeles), el enlace es por píxel. En este caso, una pulgada equivale a 96 píxeles. Obviamente, la pulgada real no coincidirá con la pulgada de dicho dispositivo. En dispositivos con alto DPI, la pulgada real es la misma que la pulgada en pantalla, por lo que el tamaño de píxel se calcula como 1/96 de pulgada. en la mesa 3 enumera las unidades absolutas básicas.
Ejemplo
encabezado de 30px
Tamaño del texto 1,5 em
titular de 24 puntos
Desplazar el texto hacia la derecha 30 milímetros
Nota
Al configurar las dimensiones, asegúrese de especificar las unidades de medida, por ejemplo, ancho: 30 px. De lo contrario, el navegador no podrá mostrar el resultado deseado porque no comprende qué tamaño necesita. Las unidades no se suman sólo cuando valor cero(margen: 0).
Internet Explorer admite la unidad vm en lugar de vmin.
Especificación
Cada especificación pasa por varias etapas de aprobación.
- Recomendación: la especificación ha sido aprobada por el W3C y se recomienda como estándar.
- Recomendación del candidato ( Posible recomendación ) - el grupo responsable del estándar está satisfecho de que cumple sus objetivos, pero requiere ayuda de la comunidad de desarrollo para implementar el estándar.
- Recomendación propuesta Recomendación sugerida) - en esta etapa el documento se envía al Consejo Asesor del W3C para su aprobación final.
- Borrador de trabajo: una versión más madura de un borrador que ha sido discutido y modificado para revisión de la comunidad.
- Borrador del editor ( Borrador editorial) - una versión borrador del estándar después de que los editores del proyecto realizaron cambios.
- Borrador ( Borrador de especificación) - el primer borrador de la norma.
La capacidad de controlar la fuente, ya sea que cambie su familia, tamaño o grosor, le permite aumentar el brillo y la singularidad de las páginas WEB.
familia de fuentes
Especifica la familia de fuentes utilizada en este texto. Puede haber varias familias de este tipo, separadas por comas. La prioridad está determinada por el orden en esta lista.
Significado:
- apellido: la familia de fuentes utilizada para mostrar el texto. Los nombres de varias palabras deben ir entre comillas.
- nombre de la fuente estándar utilizada para mostrar el texto. Las fuentes típicas pueden ser: serif, sans-serif, fantasía y monoespacio.
estilo de fuente
Especifica estilos de fuente, como cursiva o cursiva.
Significado:
- cursiva - cursiva.
- oblicuo - estilo oblicuo. Esta marca es exclusivamente fuente de pantalla. Tiene una inclinación ligeramente menor que la cursiva.
- heredar: se aplica el valor del elemento padre.
variante de fuente
Determina si la fuente se imprimirá en versalitas.
Significado:
- normal: estilo normal (predeterminado).
- versalitas: muestra la fuente en minúsculas mayúsculas.
- heredar: se aplica el valor del elemento padre.
peso de fuente
propiedades de fuente fuente css
Determina el grosor de la fuente de salida.
Significado:
- normal: estilo normal (predeterminado).
- negrita - estilo semi-negrita. La negrita resalta el texto. Las líneas se vuelven más gruesas y el texto en sí es un poco más ancho que con un estilo normal.
- Más negrita: fuente en negrita.
- más claro - fuente clara. Los estilos de fuente finos y claros son menos impresionantes que las fuentes normales o en negrita, pero son fantásticos cuando quieres una apariencia ligera y sencilla.
- 100-900 es un número que indica el grosor de la fuente. 100 corresponde al grosor más claro (más claro), 400 - normal, 700 - negrita, 900 - más negrita.
- heredar: se aplica el valor del elemento padre.
estiramiento de fuente
Define el grosor de la fuente.
Significado:
- normal - ancho normal (predeterminado)
- más ancho: aumenta el ancho actual.
- más estrecho: disminuye el ancho actual en uno.
- ultracondensado - valor más pequeño ancho.
- extracondensado - valor mayor que el anterior
- condensado: un valor mayor que el anterior.
- semicondensado: un valor mayor que el anterior.
- semiexpandido: el valor es mayor que con el espesor normal.
- expandido - valor mayor que el anterior.
- extra expandido: valor mayor que el anterior.
- ultra expandido - valor máximo ancho.
- heredar: se aplica el valor del elemento padre.
tamaño de fuente
Determina el tamaño de fuente (alto de carácter) de la fuente.
Significado:
- tamaño absoluto: utilizado para expresar el tamaño de fuente palabras clave: xx-pequeño (extremadamente pequeño), pequeño (pequeño), mediano (mediano) (predeterminado), grande (grande), x-grande (muy grande), xx-grande (extremadamente grande).
- tamaño relativo: para expresar el tamaño de fuente, se utilizan las siguientes palabras clave: más grande (más pequeño), más pequeño (más grande),
- cualquier altura correspondiente al estándar es el tamaño de fuente absoluto. Valor negativo no permitido.
- cualquier valor porcentual que cumpla con el estándar.
- heredar: se aplica el valor del elemento padre.
propiedades fuente fuente CSS
ajustar-tamaño-de-fuente
Determina la relación entre el ancho y el alto de los caracteres admitidos al configurar el tamaño de fuente. Esto le da al usuario control sobre los cambios de altura del texto.
Significado:
- ninguno: predeterminado.
- cualquier valor estándar: un número que representa la relación entre la altura y el ancho de los caracteres.
- heredar: se aplica el valor del elemento padre.
fuente
Una propiedad conveniente para configurar todos los parámetros de fuente a la vez. Si falta algún valor, se toma su valor predeterminado.
Significado:
- estilo de fuente - estilo.
- variante de fuente: un valor que determina si la fuente se muestra en letras mayúsculas minúsculas.
- peso-fuente-grosor.
- tamaño de fuente: tamaño de fuente.
- altura de línea - interlineal.
- familia de fuentes: familia de fuentes.
- heredar: se aplica el valor del elemento padre.
propiedades de fuente css
Implementación de tipografías personalizadas.
Antes de Internet Explorer 4.0, los webmasters tenían que utilizar las fuentes integradas del navegador o las fuentes disponibles en el sistema. CSS proporciona al WEB master la capacidad de especificar fuentes de visualización que se cargan junto con la página web, lo que garantiza procesamiento correcto páginas. La fuente descargable se determina utilizando nuevos elementos en sintaxis CSS. A continuación se muestra la sintaxis para definir la fuente cargada en CSS:
@font-face (familia de fuentes: nombre de fuente; src: url(failMame.eot) )
el valor fontName al que se hace referencia posteriormente propiedad CSS familia de fuentes, definida por el usuario. A continuación se muestra ejemplo completo:
El texto se muestra usando una fuente descargable.
Una vez que se define una nueva fuente, su nombre se puede utilizar como una propiedad válida de familia de fuentes. La propiedad font-family se puede asociar con una lista igual de fuentes, de modo que si no se puede cargar la primera fuente de la lista, el navegador intentará cargar la siguiente fuente o familia de fuentes. EN en este ejemplo La última fuente definida es sans-serif, que permite al navegador utilizar cualquier fuente de la familia sans-serif para representar el elemento.
CSS utiliza unidades absolutas y relativas para dimensionar varios elementos. Las unidades absolutas son independientes del dispositivo de salida, pero las unidades relativas definen el tamaño de un elemento en relación con el valor de otro tamaño.
Unidades relativas
Las unidades relativas se suelen utilizar para trabajar con texto. en la mesa 1 enumera las principales unidades relativas.
La unidad em es un valor mutable que depende del tamaño de fuente del elemento actual (el tamaño se establece mediante la propiedad de estilo de tamaño de fuente). Cada navegador tiene un tamaño de texto incorporado que se utiliza cuando este tamaño no se especifica explícitamente. Por lo tanto, inicialmente 1em es igual al tamaño de fuente predeterminado del navegador o al tamaño de fuente del elemento principal. La notación porcentual es idéntica a em, en que los valores de 1em y 100% son iguales.
La unidad ex se define como la altura del carácter "x" minúscula. ex está sujeto a las mismas reglas que em , es decir, que está vinculado al tamaño de fuente predeterminado del navegador o al tamaño de fuente de su elemento principal.
La unidad ch es igual al ancho del carácter "0" del elemento actual y, como em, depende del tamaño de fuente.
La diferencia entre em y rem es la siguiente. em depende del tamaño de fuente del elemento principal y cambia con él, y rem está vinculado al elemento raíz, es decir, el tamaño de fuente especificado para el elemento html.
También hay un grupo de unidades relativas vinculadas al tamaño de la ventana gráfica del navegador. en la mesa 2 muestra una lista de ellos con una descripción.
Unidades absolutas
Las unidades absolutas representan dimensiones físicas: pulgadas, centímetros, milímetros, puntos, picas y píxeles. Para dispositivos con bajos ppp (el número de píxeles por pulgada determina la densidad de píxeles), el enlace es por píxel. En este caso, una pulgada equivale a 96 píxeles. Obviamente, la pulgada real no coincidirá con la pulgada de dicho dispositivo. En dispositivos con alto DPI, la pulgada real es la misma que la pulgada en pantalla, por lo que el tamaño de píxel se calcula como 1/96 de pulgada. en la mesa 3 enumera las unidades absolutas básicas.
Ejemplo
encabezado de 30px
Tamaño del texto 1,5 em
titular de 24 puntos
Desplazar el texto hacia la derecha 30 milímetros
Nota
Al configurar las dimensiones, asegúrese de especificar las unidades de medida, por ejemplo, ancho: 30 px. De lo contrario, el navegador no podrá mostrar el resultado deseado porque no comprende qué tamaño necesita. Las unidades no se suman sólo cuando el valor es cero (margen: 0).
Internet Explorer admite la unidad vm en lugar de vmin.
Especificación
Cada especificación pasa por varias etapas de aprobación.
- Recomendación: la especificación ha sido aprobada por el W3C y se recomienda como estándar.
- Recomendación del candidato ( Posible recomendación) - el grupo responsable del estándar está satisfecho de que cumple sus objetivos, pero requiere ayuda de la comunidad de desarrollo para implementar el estándar.
- Recomendación propuesta Recomendación sugerida) - en esta etapa el documento se envía al Consejo Asesor del W3C para su aprobación final.
- Borrador de trabajo: una versión más madura de un borrador que ha sido discutido y modificado para revisión de la comunidad.
- Borrador del editor ( Borrador editorial) - una versión borrador del estándar después de que los editores del proyecto realizaron cambios.
- Borrador ( Borrador de especificación) - el primer borrador de la norma.
