No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Curso de Tailwind CSS 1

Curso de Tailwind CSS 1

V铆ctor Yoalli Dom铆nguez

V铆ctor Yoalli Dom铆nguez

Display

11/29
Recursos

Aportes 10

Preguntas 0

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

<h3>Display</h3>

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>
    

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 鈥減hp鈥.

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

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

Caja de Presentaci贸n

鈥淓stas 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?

Display inline es que viene por defecto