es.hideout-lastation.com
Paraíso Para Los Diseñadores Y Desarrolladores


CSS - margen: automático - Cómo funciona

Usar margin:auto para centrar un elemento de bloque horizontalmente es una técnica bien conocida. ¿Pero alguna vez te has preguntado por qué o cómo funciona? Para responder a esto, primero tenemos que echar un vistazo a cómo funciona el margen: automático. También en la mezcla está lo que el auto puede hacer en los márgenes, si funciona para el centrado vertical, y algunos otros problemas.

Pero primero, ¿qué hace auto realmente?

La definición de auto varía con los elementos, tipos de elementos y contexto . En los márgenes, auto puede significar una de dos cosas: ocupar el espacio disponible o 0 px. Estos dos definirán diferentes diseños para un elemento .

"automático" ocupando espacio disponible

Este es el uso más común de margin auto que encontramos a menudo. Al asignar auto a los márgenes izquierdo y derecho de un elemento, toman el espacio horizontal disponible en el contenedor del elemento por igual, y así el elemento se centra.

Sin embargo, esto solo funcionará para los márgenes horizontales (más sobre el porqué más adelante), y tampoco funcionará con los elementos flotantes y en línea y, por sí mismo, tampoco funcionará en los elementos posicionados absolutos y fijos (sin embargo, veremos cómo hacer que esos trabajen).

Faux Float tomando espacio disponible

Como el auto en los márgenes derecho e izquierdo ocupa el espacio "disponible" por igual, ¿qué crees que pasará cuando el valor auto se otorgue a solo uno de esos?

Un margen izquierdo o derecho con auto ocupará todo el espacio "disponible", haciendo que el elemento se vea como si hubiera sido barrido hacia la derecha o hacia la izquierda.

"Auto" calculado a 0px

Como se mencionó anteriormente, auto no funcionará en elementos flotantes, en línea y absolutos. Todos estos elementos ya han decidido sus diseños, por lo que no tiene sentido utilizar los márgenes auto y esperar que se centren así.

Eso frustrará el propósito inicial de usar algo como float . Por lo tanto, auto tendrá un valor de 0px en esos elementos.

auto tampoco funcionará en un elemento de bloque típico si no tiene un ancho. Todos los ejemplos que te mostré hasta ahora tienen anchuras.

Un ancho de valor auto tendrá márgenes de 0px . El ancho de un elemento de bloque normalmente cubre el contenedor cuando es auto o 100% y, por lo tanto, un margen auto se calculará en 0px en tal caso.

¿Qué sucede con los márgenes verticales con el valor auto ?

auto en ambos márgenes superior e inferior siempre se calcula a 0px (excepto para elementos absolutos). La especificación W3C lo dice así:

"Si" margin-top "o" margin-bottom "es" auto ", su valor utilizado es 0"

El por qué, bueno eso es hasta ahora, un misterio. Podría ser debido al flujo de página vertical típico, donde el tamaño de página aumenta en altura . Por lo tanto, centrar un elemento verticalmente en su contenedor no lo hará parecer centrado, en relación con la página en sí, a diferencia de cuando se hace de forma horizontal (en la mayoría de los casos).

Y tal vez sea por esta misma razón, decidieron agregar una excepción para elementos absolutos que se pueden centrar verticalmente a lo largo de toda la página.

También podría deberse al efecto de colapso del margen (un colapso de los "márgenes" de los elementos adyacentes), que es otra excepción para los márgenes verticales.

Sin embargo, este último parece ser un caso poco probable, ya que los elementos que no colapsan sus márgenes, como Flotantes, y los elementos con overflow no sean visible, aún asignan márgenes verticales de 0px para auto .

Centrar elementos absolutamente posicionados

Como sucede que hay una excepción para elementos absolutamente posicionados, usaremos el valor auto para centrar uno vertical y horizontalmente. Pero antes de eso, necesitamos saber cuándo funcionará el margin:auto realmente como queremos en un elemento absolutamente posicionado.

Aquí es donde entra otra especificación W3C:

"Si los tres de" izquierda ", " ancho "y" derecha "son" automáticos ": Primero configure los valores" automático "para" margen-izquierda "y" margen-derecho "en 0 ... "

"Si ninguno de los tres es" automático ": si tanto" margen-izquierda "como" margen-derecha "son" automáticos ", resuelva la ecuación bajo la restricción adicional de que los dos márgenes obtienen valores iguales"

Eso más o menos dice que para que los márgenes auto horizontales aprovechen espacios iguales, los valores de left, width y right no deberían ser auto, su valor predeterminado. Entonces, todo lo que tenemos que hacer es darles algo de valor en un elemento absolutamente posicionado. left y right deben tener valores iguales para un centrado perfecto .

La especificación también menciona algo similar para los márgenes verticales.

"Si los tres de" arriba ", " altura "y" abajo "son automáticos, ajuste" arriba "a la posición estática ..."

"Si ninguno de los tres es" auto ": si ambos" margin-top "y" margin-bottom "son" auto ", resuelve la ecuación bajo la restricción adicional de que los dos márgenes obtienen valores iguales ..."

Por lo tanto, para que un elemento absoluto se centre verticalmente, sus valores top, height e bottom no deben ser auto .

Ahora combinando todo esto, esto es lo que obtendremos:

Conclusión

Si alguna vez desea vaciar un elemento en su página hacia la derecha o hacia la izquierda sin los siguientes elementos que lo envuelven (como lo que sucede con float), recuerde que existe la opción de usar auto para los márgenes.

Convertir un elemento en absoluto para que se pueda centrar verticalmente puede no ser una gran idea. Hay otras opciones como flexbox y CSS transform que son más adecuadas para esas.

Generadores de patrones gratuitos: Aquí hay 8 herramientas que quiere marcar

Generadores de patrones gratuitos: Aquí hay 8 herramientas que quiere marcar

Los patrones son ampliamente utilizados en el diseño web como fondo. Básicamente, los patrones se pueden definir como gráficos utilizados en forma repetida en un campo. Si te encuentras enfrentando dificultades para crear patrones naturales, es porque es bastante complicado crear un bucle que funcione tanto vertical como horizontalmente, bueno, al menos es difícil hacerlo manualmente.Afo

(Consejos de tecnología y diseño)

Cómo habilitar el radio de borde CSS3 en Internet Explorer 8 y debajo

Cómo habilitar el radio de borde CSS3 en Internet Explorer 8 y debajo

CSS3 nos da la capacidad de crear esquinas redondeadas con la propiedad border-radius . Pero como ya sabrá, esta nueva característica no se reconoce en Internet Explorer 8 (IE8) y sus versiones anteriores. Por lo tanto, cuando aplica CSS3 Border Radius a un elemento, sigue apareciendo como un cuadro con consejos puntiagudos.P

(Consejos de tecnología y diseño)