Come faccio a creare una scatola del contenitore in HTML

Per rappresentare qualsiasi elemento, creiamo spesso forme diverse per la progettazione di scopi. Più specificamente, la scatola è una delle forme più comunemente usate. In HTML, la casella del contenitore contiene alcuni contenuti. Per creare una scatola del contenitore in HTML, è possibile utilizzare l'elemento "" o il contenitore "Grid".

I risultati di questo blog sono:

• Metodo 1: come creare la casella contenitore in HTML usando il tag?
• Metodo 2: come creare la casella del contenitore in HTML usando il contenitore "griglia"?
• Come giustificare il contenuto di una scatola di contenitori in HTML?

Metodo 1: come creare la casella contenitore in HTML usando il tag?

In HTML, prima, crea un ""Con il nome"scatola". Quindi, aggiungi un file

Tag al suo interno per includere alcuni contenuti nella pagina:

Questa è una scatola.

Nella sezione CSS, applicare le proprietà di stile agli elementi HTML per decorarli.

Style Box Div

.scatola
Margine: auto;
larghezza: 200px;
Altezza: 200px;
imbottitura: 10px;
Bordo: 5px Solid Crimson;

IL ".scatola"Viene utilizzato per accedere alla scatola di div. Di seguito è riportata la spiegazione delle proprietà applicate ad esso:

• "margine"Con il valore impostato come"auto", Viene utilizzato per dare uguale spazio al div.
• "larghezza"La proprietà imposta la larghezza dell'elemento su"200px".
• "altezza"La proprietà imposta l'altezza dell'elemento su"200px".
• "imbottitura"Proprietà viene dato un valore di"10px", Che aggiunge spazio a 10 px attorno al contenuto di Div.
• "confine" È "5px Solid Crimson", Dove 5px indica la larghezza del bordo, il solido è il tipo di bordo, come scanalatura, tratteggiato, punteggiato e altro, e poi cremson mostra il colore del bordo.

Produzione

Ora, passiamo al metodo successivo.

Metodo 2: come creare la casella del contenitore in HTML usando il contenitore "griglia"?

L'elemento funziona come un contenitore quando è "SchermoLa proprietà "è impostata come"inline-grid" O "griglia". I contenitori della griglia comprendono righe e colonne che contengono elementi della griglia.

Passiamo attraverso i seguenti esempi per dimostrare come creare un contenitore a griglia.

Esempio 1: Crea scatola contenitore in HTML utilizzando la proprietà "Display: Grid"
IL "Schermo"Proprietà con il valore"griglia"Viene utilizzato per fornire il layout della pagina Web in colonne e righe. Questa proprietà ci aiuta a progettare il layout senza utilizzare le proprietà di posizione e galleggiante.

Per fare ciò, prima, crea un nome di classe "contenitore". All'interno di questo aggiungi molti altri div con alcuni contenuti:

Mele
Banane
Arance
Pesche
Uva
Albicocca

Giramo il display del Div del contenitore HTML come griglia con CSS.

Stile Container Div

.Container
display: griglia;
colonne a griglia-template: auto automatica;
Background-color: #40966c;
imbottitura: 10px;
GAP: 20px;

Il Div del contenitore viene applicato con le seguenti proprietà:

• "Schermo"Alla proprietà è assegnato il valore"griglia".
• "colonne a griglia" COME "Auto Auto Auto", Che specifica che dovrebbero esserci tre colonne nella griglia.
• "colore di sfondoLa proprietà "è impostata come"#40966c".
• "imbottitura" COME "10px"Specifica lo spazio 10px attorno al contenuto del div.
• "spacco"È impostato come"20px"Per specificare lo spazio tra le colonne.

Vedremo il comportamento della proprietà Gap nella sezione Ulteriore.

Stile Div Elements of Container Div

.Container> div
background-color: #c4d1cb;
Testo-align: centro;
imbottitura: 20px auto;
Font-size: 35px;

IL ".contenitore> div"È usato per rappresentare che vogliamo modellare l'elemento Div, che è il bambino di Div Container. Più specificamente, il ">"Il segno è noto come selettore figlio.

Di seguito sono riportate le proprietà applicate al Div del contenitore:

• "colore di sfondo"La proprietà specifica il colore dello sfondo dell'elemento.
• "allineamento"È impostato come"centro"Per centrare allineare il contenuto del div.
• "imbottitura"È specificato come"20px Auto", Dove 20px è lo spazio nella parte superiore e auto indica lo spazio uguale dai lati a sinistra a destra.
• "dimensione del font"Valore della proprietà impostato come"35px"Come dimensione del carattere.

Di seguito è riportato l'output corrispondente del codice sopra menzionato:

Esempio 2: Crea scatola contenitore in HTML utilizzando la proprietà "Display: inline-grid"
IL "Schermo"Proprietà con il valore"inline-grid"Crea una scatola di container in linea.

CSS
La proprietà del display del contenitore di div sopra menzionato è impostata su in linea-grid:

display: inline-grid;

Produzione

Esempio 3: Crea scatola contenitore in HTML utilizzando la proprietà "Grid-Template-Colons"
IL "colonne a griglia"La proprietà definisce la larghezza della colonna del contenitore e il suo numero pertinente di colonne:

colonne a griglia-template: auto automatica;

Ciò comporterà tre colonne a pari dimensioni. Tuttavia, puoi definire la larghezza della colonna in base alle tue preferenze:

Esempio 4: Crea scatola contenitore in HTML utilizzando la proprietà "Grid-Template-Rows"
Questa proprietà definisce l'altezza e il numero delle righe del contenitore:

Grid-Template-Rows: Auto Auto 100PX;

La sintassi di cui sopra si tradurrà in due righe con uguali altezze e la terza come "100px":

Finora abbiamo discusso di come aggiungere righe e colonne al nostro contenitore a griglia. Nella sezione successiva, dimostriamo l'esempio per giustificare il contenuto del contenitore.

Come giustificare il contenuto di una scatola di contenitori in HTML?

IL "giustificare il contenuto"La proprietà può essere utilizzata per allineare l'intera griglia all'interno del contenitore. Per far funzionare questa proprietà, la larghezza totale della griglia deve essere inferiore alla larghezza del contenitore.

Questa proprietà ha diversi valori che sono elencati di seguito:

• inizio
• FINE
• Spazio-unitamente
• Spazio-around
• spaziale
• centro

La descrizione dei valori di cui sopra verrà discussa praticamente.

Esempio 1: Centro giustificare il contenuto di una scatola del contenitore in HTML
Nella sezione CSS, imposta il "Schermo"Proprietà come"griglia"E poi aggiungi la proprietà"giustificare il contenuto"E assegna il valore"centro":

giustificare contento: centro;

Si può osservare che il contenuto della griglia è stato allineato con successo:

Esempio 2: personalizzare le lacune complessive di una scatola del contenitore in HTML
Puoi personalizzare le lacune della griglia usando il "spacco"Proprietà come segue:

GAP: 20px;

Si può vedere che le lacune di 20px vengono aggiunte correttamente al contenitore della griglia:

Esempio 3: personalizzare le lacune delle righe di una scatola del contenitore in HTML
IL "gap a fila"La proprietà viene utilizzata per inserire specificamente lo spazio tra le righe. Nell'esempio, imposteremo gli spazi tra le righe del contenitore come "20px":

ROW-GAP: 20px;

Produzione

Esempio 4: personalizzare le lacune delle colonne di una casella di contenitore in HTML
Possiamo anche personalizzare gli spazi tra le colonne. Per raggiungere questo obiettivo, utilizziamo la proprietà "colonna-gap".

Ora, assegna il "colonna-gap"Il valore della proprietà come"20px":

colonna-gap: 20px;

Osserva il divario generato tra le colonne:

Ecco come possiamo creare scatole di container in HTML e personalizzare i loro spazi.

Conclusione

I contenitori sono scatole che contengono alcuni contenuti al loro interno. L'elemento può essere utilizzato per creare una scatola del contenitore impostando la sua larghezza e proprietà di altezza. In CSS, utilizzando il "griglia"Può anche eseguire la stessa operazione. Questo blog ha discusso del metodo per la creazione di una casella di container in HTML.