¿Cómo hago una caja de contenedores en html?

Para representar cualquier elemento, a menudo creamos diferentes formas para fines de diseño. Más específicamente, la caja es una de las formas más utilizadas. En HTML, la caja de contenedores contiene algo de contenido. Para hacer una caja de contenedor en HTML, puede utilizar el elemento "" o el contenedor de "cuadrícula".

Los resultados de este blog son:

• Método 1: Cómo crear un cuadro de contenedor en HTML usando la etiqueta?
• Método 2: Cómo crear un cuadro de contenedor en HTML usando el contenedor "cuadrícula"?
• Cómo justificar el contenido de un cuadro de contenedores en HTML?

Método 1: Cómo crear un cuadro de contenedor en HTML usando la etiqueta?

En HTML, primero, crea un "" con el nombre "caja". Entonces, agregue un

Etiqueta dentro de él para incluir algún contenido en la página:

Esta es una caja.

En la sección CSS, aplique propiedades de estilo a los elementos HTML para decorarlos.

Estilo Box Div

.caja
margen: auto;
Ancho: 200px;
Altura: 200px;
relleno: 10px;
Border: 5px Solid Crimson;

El ".caja"Se usa para acceder a la caja Div. A continuación se muestra la explicación de las propiedades aplicadas:

• "margen"Con el valor establecido como"auto", Se usa para dar el mismo espacio al Div.
• "ancho"La propiedad establece el ancho del elemento en"200px".
• "altura"La propiedad establece la altura del elemento a"200px".
• "relleno"La propiedad tiene un valor de"10px", Que agrega espacio de 10 px alrededor del contenido del DIV.
• "borde" es "5px Solid Crimson", Donde 5px indica el ancho del borde, el sólido es el tipo de borde, como ritmo, discontinuo, punteado y más, y luego Crimson muestra el color del borde.

Producción

Ahora, pasemos al siguiente método.

Método 2: Cómo crear un cuadro de contenedor en HTML usando el contenedor "cuadrícula"?

El elemento funciona como un contenedor cuando es "mostrar"La propiedad se establece como"en línea" o "red". Los contenedores de la cuadrícula comprenden filas y columnas que contienen elementos de cuadrícula.

Pasemos por los siguientes ejemplos para demostrar cómo hacer un contenedor de cuadrícula.

Ejemplo 1: Cree un cuadro de contenedor en HTML usando la propiedad "Display: Grid"
El "mostrar"Propiedad con el valor"red"Se utiliza para proporcionar el diseño de la página web en columnas y filas. Esta propiedad nos ayuda a diseñar el diseño sin usar propiedades de posición y flotación.

Para hacerlo, primero, cree un nombre de clase "envase". Dentro de esto, agregue varios divs más con algún contenido:

Manzana
Plátanos
Naranjas
Duraznos
Uvas
Albaricoque

Pasemos la visualización del contenedor HTML Div como una cuadrícula con CSS.

Estilo contenedor div Div

.envase
Pantalla: cuadrícula;
Columna de plantilla de cuadrícula: Auto Auto Auto;
Color de fondo: #40966c;
relleno: 10px;
brecha: 20px;

El contenedor Div se aplica con las siguientes propiedades:

• "mostrarSe asigna a la propiedad el valor "red".
• "columnas de plantilla de cuadrícula" como "Auto Auto Auto", Que especifica que debe haber tres columnas en la cuadrícula.
• "color de fondo"La propiedad se establece como"#40966C".
• "relleno" como "10px"Especifica el espacio de 10px alrededor del contenido del DIV.
• "brecha"Está configurado como"20px"Para especificar el espacio entre las columnas.

Veremos el comportamiento de la propiedad GAP en la sección adicional.

Elementos de estilo de estilo de contenedor div Div

.contenedor> div
Color de fondo: #C4D1CB;
Text-Align: Center;
relleno: 20px automático;
tamaño de fuente: 35px;

El ".contenedor> div"Se usa para representar que queremos diseñar el elemento div, que es el hijo del contenedor div Div. Más específicamente, el ">"Se conoce como el selector de niños.

A continuación se muestran las propiedades aplicadas al contenedor Div:

• "color de fondo"La propiedad especifica el color del fondo del elemento.
• "texto alineado"Está configurado como"centro"Centrar alinear el contenido del DIV.
• "relleno"Se especifica como"20px Auto", Donde 20px es el espacio en el fondo superior, y el auto indica el espacio igual de los lados de la izquierda-derecha.
• "tamaño de fuente"Valor de propiedad establecido como"35px"Como el tamaño de la fuente.

A continuación se muestra la salida correspondiente del código mencionado anteriormente:

Ejemplo 2: Crear cuadro de contenedor en HTML usando la propiedad "Display: Inline-Grid"
El "mostrar"Propiedad con el valor"en línea"Crea una caja de contenedores de nivel en línea.

CSS
La propiedad de visualización del contenedor DIV mencionado anteriormente se establece en la red en línea:

Pantalla: en línea en línea;

Producción

Ejemplo 3: Crear cuadro de contenedor en HTML utilizando la propiedad de "Columna de plantilla de cuadrícula"
El "columnas de plantilla de cuadrícula"La propiedad define el ancho de la columna del contenedor y su número relevante de columnas:

Columna de plantilla de cuadrícula: Auto Auto Auto;

Esto dará como resultado tres columnas con igual tamaño. Sin embargo, puede definir el ancho de la columna de acuerdo con su preferencia:

Ejemplo 4: Cree un cuadro de contenedor en HTML utilizando la propiedad de "Rases de plantilla de cuadrícula"
Esta propiedad define la altura y el número de las filas del contenedor:

Grid-platemplate-Rows: Auto Auto 100px;

La sintaxis anterior dará como resultado que dos filas tengan alturas iguales y la tercera como "100px":

Hasta ahora, hemos discutido cómo agregar filas y columnas a nuestro contenedor de cuadrícula. En la siguiente sección, demostramos el ejemplo para justificar el contenido del contenedor.

Cómo justificar el contenido de un cuadro de contenedores en HTML?

El "Justify-ContentLa propiedad se puede utilizar para alinear toda la cuadrícula dentro del contenedor. Para que esta propiedad funcione, el ancho total de la cuadrícula debe ser menor que el ancho del contenedor.

Esta propiedad tiene varios valores que se enumeran a continuación:

• comenzar
• fin
• espacio-incluso
• espacial
• espacio entre
• centro

La descripción de los valores anteriores se discutirá prácticamente.

Ejemplo 1: Centro Justifique el contenido de un cuadro de contenedor en HTML
En la sección CSS, establezca el "mostrar"Propiedad como"red"Y luego agregue la propiedad"Justify-Content"Y asignar el valor"centro":

Justify-Content: Center;

Se puede observar que el contenido de la cuadrícula se ha alineado con éxito:

Ejemplo 2: Personalizar los espacios generales de una caja de contenedores en HTML
Puede personalizar los espacios de la cuadrícula utilizando el "brecha"Propiedad de la siguiente manera:

brecha: 20px;

Se puede ver que los espacios de 20px se agregan con éxito al contenedor de la cuadrícula:

Ejemplo 3: Personalizar los espacios de fila de un cuadro de contenedor en HTML
El "hileraLa propiedad se utiliza para insertar específicamente espacio entre las filas. En el ejemplo, estableceremos los espacios entre las filas de contenedores como "20px":

ROWA-GAP: 20PX;

Producción

Ejemplo 4: Personalizar los espacios de columnas de un cuadro de contenedor en HTML
También podemos personalizar los espacios entre las columnas. Para lograr esto, utilizamos la propiedad "brecha de columna".

Ahora, asigne el "brecha de columna"El valor de la propiedad como"20px":

columna-gap: 20px;

Observe la brecha generada entre las columnas:

Así es como podemos crear cajas de contenedores en HTML y personalizar sus espacios.

Conclusión

Los contenedores son cajas que contienen algo de contenido dentro de ellos. El elemento se puede utilizar para hacer un cuadro de contenedor configurando sus propiedades de ancho y altura. En CSS, utilizando el "red"También puede realizar la misma operación. Este blog discutió el método para crear un cuadro de contenedores en HTML.