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;
}
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;
}
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;
}
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 li
s 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.
¿Me ayudas?

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
Nuevo comentario
Nueva replica {{ formatEllipsisAuthor(replyComment.author) }}
Escribe el primer comentario
{{ comments.length }} comentarios