Lección 8: Display

Hay momentos, cuando maquetamos, que necesitamos cambiar la naturaleza de una etiqueta haciendo que un elemento en línea se vuelva de bloque o viceversa. Para ello disponemos del estilo display.

Pero antes debemos comprender, ¿por qué necesitaríamos alterar sus propiedades? Un caso muy habitual es cuando trabajamos con caso hipervínculos. Por temas de experiencia de usuario, el diseñador UX/UI nos va a pedir que disponga de un área pulsable mayor. De ese modo, nosotros, optaríamos por dar una anchura mayor.

a {
	background-color: yellow;
	width: 30rem;
	text-align: center;
}

🛍️ Carrito de compra

Sin embargo no percibiremos ningún cambio. Se debe a que los elementos en línea, las propiedades de relleno o dimensiones, no le afectan. Por lo tanto modificaremos su display para convertirlo de bloque y así poder gestionarlo.

a {
	display: block;
	background-color: yellow;
	width: 30rem;
	text-align: center;
}

🛍️ Carrito de compra

Ocultar

Si queremos hacer que una etiqueta desaparezca por completo en el diseño, podemos usar el valor none. Muy útil cuando no queremos mostrar elementos hasta que ocurra un evento o animación. Por ejemplo, cuando se pulsa un botón hacer que aparezca un menú de smartphone.

.elemento {
    display: none;
}

Actuales

Los valores actuales, a pesar de encontrarse recogido en el estándar, ¡Solo son compatibles con Firefox! Por lo tanto debemos ignorarlos y pasar a la siguiente sección.

.elemento {

    /* Bloque */
    display: block flow;
    /* Línea */
    display: inline flow;
    display: inline flow-root;

    /* Capacidad de bloque pero posicionado en línea */
    display: block flow-root;

    /* Flex en bloque: Enfocado a maquetación */
    display: block flex;
    /* Flex en linea: Enfocado a maquetación */
    display: inline flex;

    /* Grid en bloque: Enfocado a maquetación */
    display: block grid;
    /* Grid en línea: Enfocado a maquetación */
    display: inline grid;
}

Heredados

Son compatibles con todos los navegadores ya que formaron parte en el pasado del estándar. Se mantienen por temas de retrocompatibilidad.

.elemento {

    /* Bloque */
    display: block;
    /* Línea */
    display: inline;
    display: inline;

    /* Capacidad de bloque pero posicionado en línea */
    display: inline-block;

    /* Flex en bloque: Enfocado a maquetación */
    display: flex;
    /* Flex en linea: Enfocado a maquetación */
    display: inline-flex;

    /* Grid en bloque: Enfocado a maquetación */
    display: grid;
    /* Grid en línea: Enfocado a maquetación */
    display: inline-grid;
}

Más información

Actividad 1

Crea varios párrafos y logra que estén alineados horizontalmente en lugar de uno a continuación de otro.

Actividad 2

Continúa la actividad 4 de la lección de medidas. Alarga el subrayado en el principio y el final cambiando la anchura del strong.

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Me ayudas?

No te sientas obligado a realizarme una donación, pero cada aportación me ayuda a mantener el sitio en activo para que continúe existiendo y me motiva a continuar creando nuevo contenido.

Comprame un café — Pulsa sobre la imagen

1 café: Se mantiene el dominio durante 4 meses.
2 cafés: Se liquida 1 mes del Servidor Web.
3 cafés: Se paga 1 mes de Newsletter.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica {{ formatEllipsisAuthor(replyComment.author) }}

Escribe el primer comentario