Esta clase acepta más de un valor en Tailwind CSS. Todas las propiedades están cubiertas como en forma de clase. Es la alternativa a la propiedad de visualización CSS . Esta clase se utiliza para definir cómo se colocarán los componentes (div, hipervínculo, encabezado, etc.) en la página web. Como sugiere su nombre, esta propiedad se utiliza para definir la visualización de las diferentes partes de una página web.
Clases de visualización:
- bloque: Se utiliza para mostrar un elemento como un elemento de bloque.
- bloque en línea: se utiliza para mostrar un elemento como un contenedor de bloque de nivel en línea.
- en línea: se utiliza para mostrar un elemento como un elemento en línea.
- flex: se utiliza para mostrar un elemento como un contenedor flexible a nivel de bloque.
- inline-flex: se utiliza para mostrar un elemento como un contenedor flexible de nivel en línea.
- tabla: Se utiliza para establecer el comportamiento como <tabla> para todos los elementos.
- table-caption: Se utiliza para establecer el comportamiento como <caption> para todos los elementos.
- table-cell: Se utiliza para establecer el comportamiento como <td> para todos los elementos.
- table-column: Se utiliza para establecer el comportamiento como <col> para todos los elementos.
- table-column-group: Se utiliza para establecer el comportamiento como <column> para todos los elementos.
- table-footer-group: Se utiliza para establecer el comportamiento como <footer> para todos los elementos.
- table-header-group: Se utiliza para establecer el comportamiento como <header> para todos los elementos.
- table-row-group: Se utiliza para establecer el comportamiento como <fila> para todos los elementos.
- table-row: Se utiliza para establecer el comportamiento como <tr> para todos los elementos.
- flow-root: Se utiliza para establecer el valor por defecto.
- grilla: se utiliza para mostrar un elemento como un contenedor de grilla a nivel de bloque.
- inline-grid: se utiliza para mostrar un elemento como un contenedor de cuadrícula de nivel en línea.
- contenido: Se utiliza para desaparecer el envase.
- oculto: Se utiliza para eliminar el elemento.
bloque: Se utiliza para mostrar un elemento como un elemento a nivel de bloque. Esta clase se usa como propiedad predeterminada de div . Esta clase coloca el div uno tras otro verticalmente. La altura y el ancho del div se pueden cambiar usando la clase de bloque si no se menciona el ancho, entonces el div debajo de la clase de bloque ocupará el ancho del contenedor.
Sintaxis:
<element display="block">...</element>
Ejemplo 1:
HTML
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <center> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS block Class</b> <div class="bg-green-200 p-4 mx-16 space-y-4"> <span class="block h-12 bg-green-500 rounded-lg">1</span> <span class="block h-12 bg-green-500 rounded-lg">2</span> <span class="block h-12 bg-green-500 rounded-lg">3</span> </div> </center> </body> </html>
Producción:
bloque en línea: se utiliza para mostrar un elemento como un contenedor de bloque de nivel en línea. Esta función utiliza las dos propiedades mencionadas anteriormente, bloque e inline. Entonces, esta clase alinea el div en línea, pero la diferencia es que puede editar la altura y el ancho del bloque. Básicamente, esto alineará el div tanto en bloque como en línea.
Sintaxis:
<element display="inline-block">...</element>
Ejemplo 2:
HTML
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <center> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS inline-block Class</b> <div class="bg-green-200 p-4 mx-16 space-y-4"> <span class="inline-block w-32 h-12 bg-green-500 rounded-lg">1</span> <span class="inline-block w-32 h-12 bg-green-500 rounded-lg">2</span> <span class="inline-block w-32 h-12 bg-green-500 rounded-lg">3</span> </div> </center> </body> </html>
Producción:
en línea: se utiliza para mostrar un elemento como un elemento en línea. Esta clase es la propiedad predeterminada de las etiquetas de anclaje. Esto se usa para colocar el div en línea, es decir, de manera horizontal. La propiedad de visualización en línea ignora la altura y el ancho establecidos por el usuario.
Sintaxis:
<element display="inline">...</element>
Ejemplo 3:
HTML
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <center> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS inline Class</b> <div class="bg-green-200 p-4 mx-16 space-y-4"> <span class="inline bg-green-500 rounded-lg">1</span> <span class="inline bg-green-500 rounded-lg">2</span> <span class="inline bg-green-500 rounded-lg">3</span> </div> </center> </body> </html>
Producción:
flex: la clase flex es mucho más receptiva y compatible con dispositivos móviles. Es fácil colocar los elementos secundarios y el contenedor principal. El margen no colapsa con los márgenes del contenido. El orden de cualquier elemento se puede cambiar fácilmente sin editar la sección HTML.
Sintaxis:
<element display="flex">...</element>
Ejemplo 4:
HTML
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <center> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS flex Class</b> <div class="flex bg-green-200 p-4 mx-16 "> <div class="flex-1 bg-green-500 rounded-lg">1</div> <div class="flex-1 bg-green-500 rounded-lg">2</div> <div class="flex-1 bg-green-500 rounded-lg">3</div> </div> </center> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA