Display

Contenido del curso

Introducción, instalación y ambiente de desarrollo

Conceptos básicos

Utilerías

Proyecto: PlatziFood

Conclusiones

29
Conclusiones y qué sigue
00:54 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:004:42

Display

Curso de Tailwind CSS 1

Clase 11 de 29

Clase 11 / 29

Comentarios (10)10 comentarios

Alex Camacho

Profesor

Hace 6 años

Jose Morales Varon

Hace 6 años

Alex Camacho

Profesor

Ruben Garcia

Christian Velázquez

Diego Quintero

Emanuel Torres

Jhonel Enrique Rios Jaimes

Hace 6 años

Jimmy Buriticá Londoño

Hace 6 años

Teresa Carbajal Herrera

Hace 6 años

Jose Morales Varon

Hace 6 años

Gonzalo Pimentel

Hace 6 años

Jaime David Burbano Montoya

Hace 7 años

Diego Forero

Team Platzi

Hace 7 años

Hernán Arica

Hace 6 años

Jose Morales Varon

Hace 6 años

Recursos

¿Qué son los tipos de caja de presentación en CSS?

Los tipos de caja de presentación son fundamentales en el diseño web, ya que determinan cómo se muestran y organizan los elementos en la pantalla. Los tipos más importantes incluyen block, inline, inline-block y flex, cada uno con sus características y usos específicos para asegurarse de que nuestros diseños sean visualmente atractivos y funcionales. En esta clase, nos enfocaremos en los tres primeros y dejaremos flex para un análisis detallado posteriormente.

¿Cómo funcionan block, inline y inline-block en CSS?

Cada tipo de caja tiene un comportamiento único sobre cómo ocupa el espacio en el diseño:

block: Este tipo de display ocupa todo el ancho disponible del contenedor en el que se encuentra. Los elementos con display block empiezan siempre en una nueva línea y ocupan todo el ancho disponible, perfecto para elementos como párrafos y divs.
inline: Al contrario del bloque anterior, inline ocupa solo el espacio necesario para su contenido y no obliga a que los elementos siguientes comiencen en una nueva línea, como cuando trabajamos con elementos como <span> y enlaces.
inline-block: Es similar a inline, pero estos elementos pueden tener un tamaño ajustable utilizando propiedades como width y height. Esto es útil cuando necesitamos que los elementos mantengan cierta alineación y dimensiones específicas en un diseño fluido.

¿Cómo se implementan block, inline y inline-block en HTML y CSS?

Para experimentarlo, utilizaremos un archivo HTML y algunas reglas de CSS básicas.

<!DOCTYPE html>
<html>
<head>
    <title>Demostración de Display</title>
    <style>
        .block-div {
            display: block;
            background-color: lightgray;
        }
        .inline-div {
            display: inline;
            background-color: lightgreen;
        }
        .inline-block-div {
            display: inline-block;
            background-color: lightblue;
            width: 100px;
            height: 50px;
        }
        .box {
            margin-top: 8px;
            padding: 4px;
        }
    </style>
</head>
<body>
    <div class="box block-div">Block Element</div>
    <div class="box inline-div">Inline Element</div>
    <div class="box inline-div">Another Inline Element</div>
    <div class="box inline-block-div">Inline-block Element</div>
</body>
</html>

¿Cómo afectan estos tipos de display al comportamiento de las cajas?

block se usa comúnmente para estructurar la disposición vertical de la página, ya que se alinea en forma de caja una debajo de otra, utilizando toda la anchura del contenedor.
inline nos permite colocar elementos en línea, uno al lado del otro, sin romper el flujo del documento, muy útil para texto y elementos pequeños en serie.
inline-block equilibra ambas capacidades, permitiendo que los elementos se dispongan en línea, a la vez que permiten configuraciones de ancho, alto y otros aspectos visuales más complejos.

Incorporar estos conocimientos y practicar cómo afectan al diseño y la disposición en la web abrirá un mundo de posibilidades en tus proyectos. Recuerda, experimentar y modificar los ejemplos es clave para entender profundamente cómo funcionan estos tipos de caja. ¡Sigue practicando y explorando para dominar el arte del diseño web!

Las propiedades de display son útiles para poder controlar las dimensiones o espacios. Las propiedades básicas de display son:

Block → Con esta configuración los bloques abarcan toda la pantalla.

<div class="text-center">
		<div class="block bg-blue-800">1</div>
    <div class="block bg-blue-500">2</div>
    <div class="block bg-blue-300">3</div>
</div>

Inline-block → Sólo ocupan el espacio necesario para mostrar lo que hay en su interior.

<div class="text-center">
		<div class="inline-block bg-blue-800">1</div>
    <div class="inline-block bg-blue-500">2</div>
    <div class="inline-block bg-blue-300">3</div>
</div>

Inline → Sólo ocupan el espacio necesario para mostrar lo que hay en su interior y la altura del elemento es indiferente.

<div class="text-center">
		<div class="inline bg-blue-800">1</div>
    <div class="inline bg-blue-500">2</div>
    <div class="inline bg-blue-300">3</div>
</div>

Hidden → El elemento en cuestión no se muestra.

<div>
    <div class="inline-block bg-blue-800">1</div>
    <div class="inline-block bg-blue-500">2</div>
    <div class="hidden bg-blue-300">3</div>
    <div class="inline-block bg-blue-100">4</div>
</div>

Buenos apuntes

Que bueno que te son de utilidad :)

Propiedades para controlar dimensiones y espacios de las cajas de presentación (display) :

Block: abarca toda la pantalla
Inline-Block: ocupan el espacio necesario
Inline: ocupan el espacio necesario sin altura
Hidden: el bloque no se muestra

Tailwind, es compatible para usar en Wordpress? Obviando que, utilizamos "php".

si se puede usar con php, al incluirlo con wordpress tendrías que asegurarte donde lo agregas para que evites algún tipo de colisión de estilos.

¿Que atajo de teclado usa el profesor para crear archivos y rutas asi como se estilaba en sublime text?

Se llama advanced-new-file, está en la sección de plugins de VS Code.

La documentación de Display la encuentran el siguiente link: https://tailwindcss.com/docs/display

Caja de Presentación

"Estas propiedades pueden controlar las dimensiones o espacios."

-Block - en la caja de presentación no cambia con block. -Inlilne-block - se posiciona dentro de la caja. -Inline - se posiciona fuera de la caja. -Hideden - se oculta el elemento.

Les recomiendo mucho que lean la documentación, hay modificaciones muy interesantes allí además si quieren ver algunos ejemplos de páginas construidas y elementos agregados también se muestran allí.

Bueno para recordar.

¿No hay dispay grid?

Si existe, revisando la documentación oficial aquí la encuentras https://tailwindcss.com/docs/display#grid

Si, si hay solo que no se tomaron la molestia de introducirlo...

Display inline es que viene por defecto

Introducción, instalación y ambiente de desarrollo

¿Qué es Tailwind CSS?

Instalación y ambiente de desarrollo

Directivas de Tailwind

Conceptos básicos

Personalización y configuración

Responsive Design, Mobile First y Utility First

Utilerías

Colores

Cómo crear grids o columnas en Tailwind CSS

Dimensiones y Espacios

Cambiando las propiedades de la tipografía

Ajustando el espaciado entre letras y líneas

Display

Flexbox

Crea tus propias utilerías

Entendiendo las variantes y las pseudo-clases

¡Es hora de practicar!

Proyecto: PlatziFood

Creando una card

Aplicando formato a la card

Responsive design en la card

Construye el header

Crea el footer

Crea un banner

Cómo integrar una card

Forms

Directivas de Apply

Extraer componentes

Navbar

Alpine JS

Optimiza tu archivo: PurgeCSS y NanoCSS

Conclusiones

Conclusiones y qué sigue

Display