Lección 11: 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;
}

Sintaxis multipalabra

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;
}

Valores precompuestos (heredados)

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

.elemento {

    /* Bloque */
    display: block;
    /* Línea */
    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 6 (Medidas). Alarga el subrayado en el principio y el final cambiando la anchura del strong.

Actividad 3

Crea un menú con 4 botones que tenga la jerarquía de etiquetas header » nav » ul » li » a. A continuación consigue que los lis estén alineados horizontalmente (en lugar de mostrarse uno debajo de otro).

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?

Comprame un café — Pulsa sobre la imagen

No te sientas obligado a realizar una donación, pero cada aportación mantiene el sitio en activo logrando que continúe existiendo y sea accesible para otras personas. Además me motiva a crear nuevo contenido.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

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

Escribe el primer comentario