Comprensione della proprietà del display CSS

Sep 14, 2025

Come si fa

È mezzanotte, e quella div. Sul tuo sito sembra ancora un petto giocattolo di un bambino. Tutti gli elementi sono un casino confuso e ogni volta che giochi con CSS. 'S Schermo proprietà, riorganizzano in un po 'completamente diverso di sciocchezze.

Se sei come me, probabilmente lo risolverai amortando sotto il tuo respiro e diventando costantemente più aggressivo con la tua tastiera. E anche se quella strategia ha lavorato per me prima, recentemente ho messo per trovare un modo migliore per capire il Schermo proprietà.

Risulta le basi di Schermo sono molto più semplici di quanto pensassi originariamente. In effetti, usano gli stessi principi come imballaggio di una valigia. Ho intenzione di coprire blocco di visualizzazione , blocco in linea e in linea . Se hai organizzato una valigia in modo ordinato prima, vedrai il parallelo. Se sei il tipo di persona che ramà tutti i tuoi vestiti in modo casuale - beh, c'è solo così tanto che posso fare per te.

La nostra valigia conterrà tre tipi di abbigliamento:

Delicati, come una camicia collegata
T-shirt che può essere arrotolata
Calzini o biancheria intima che possono essere farciti in spazi vuoti

Per riferimento, se abbiamo modellato la valigia in HTML, sembrerebbe questo:

 & lt; div class = 'valigia' & gt;
    & lt; div class = 'delicate' & gt; & lt; / div & gt;
    & lt; div class = 'tshirt' & gt; & lt; / div & gt;
    & lt; div class = 'tshirt' & gt; & lt; / div & gt;
    & lt; div class = 'tshirt' & gt; & lt; / div & gt;
    & lt; div class = 'tshirt' & gt; & lt; / div & gt;
    & lt; div class = 'calze' & gt; & lt; / div & gt;
    & lt; div class = 'tshirt' & gt; & lt; / div & gt;
    & lt; div class = 'tshirt' & gt; & lt; / div & gt;
    & lt; div class = 'tshirt' & gt; & lt; / div & gt;
    & lt; div class = 'tshirt' & gt; & lt; / div & gt;
& lt; / div & gt;

Gli oggetti delicati in alto

The collared shirt sits on a pile of the clothes beneath it. It is the only item that occupies its own layer — La camicia collegata si siede su una pila dei vestiti sotto di esso. È l'unico oggetto che occupa il proprio livello

Blocco di visualizzazione è il valore predefinito per la maggior parte degli elementi HTML. Ciò significa che l'elemento occupa l'intero spazio orizzontale all'interno del suo contenitore div. . Se è vicino ad altri elementi di fratello, inizierà una nuova linea e non consente altri elementi sulla sua linea. È simile agli oggetti delicati che hai messo nella parte superiore della tua valigia. Questi sono articoli delicati o intelligenti come camicie collegate. Non vuoi che vengano rugosi, quindi assicurati che non vengano spinti contro altri pezzi di vestiti.

Questo porta una delle parti più difficili di blocco di visualizzazione . Nota come la camicia collegata non occupi l'intera larghezza della valigia? Ciò non significa che altri oggetti salti fino al suo livello. Diciamo che questa maglietta è del 60 per cento della larghezza della valigia; Bloccherebbe ancora altri elementi di unirsi al livello superiore.

Ecco perché c'è un bordo arancione nella foto. UN blocco di visualizzazione L'elemento aggiungerà automaticamente un margine attorno ad esso se non occupare l'intero spazio orizzontale.

T-shirt ben confezionate

Here we can see the top and bottom rows of T-shirts, with four shirts in each — Qui possiamo vedere le file superiore e inferiore delle T-shirt, con quattro camicie in ciascuna

La maggior parte della tua valigia è probabilmente piena del resto dei tuoi vestiti per il tuo viaggio. Per la semplicità, lo tagliamo a solo t-shirt. C'è un grande dibattito su Internet per quanto riguarda il pieghevole o il rotolamento è più efficiente. Sono un tipo pieghevole di persona.

Ad ogni modo, per adattarsi al maggior numero di articoli, allinei le tue magliette fianco a fianco. Questo è esattamente cosa Display: blocco in linea è pensato per Questi elementi possono sedersi uno accanto all'altro sulla stessa linea, nonché accanto a Display: inline. elementi.

a differenza di Display: inline. ELEMENTI, AN. blocco in linea L'elemento si sposterà alla riga successiva se non si adatta al suo contenimento div. accanto all'altro blocco in linea elementi. Per far suscitare una t-shirt sulla riga successiva, avresti bisogno di tagliarlo a metà e usare la metà rimanente per iniziare una nuova riga. Blocco in linea Gli elementi non sono autorizzati a dividere a metà se non si adattano a una linea.

I calzini che riempiono le lacune

The socks are inline elements, which means they will fill the gaps around the T-shirts — I calzini sono elementi in linea, il che significa che riempiranno le lacune attorno alle T-shirt

Torna all'HTML originale e noterete che ci sono un calzino & lt; div & gt; tra le otto t-shirt. Ma dai un'occhiata alla vista orizzontale della valigia a destra. Se ci sono un calzino & lt; div & gt; , come può terminare la riga centrale e iniziare la riga in basso? Questo è lo scopo di Display: inline. !

Un in linea L'elemento si rivelerà alla riga successiva se supera la larghezza del div. (In questo modo è diverso da blocco in linea o bloccare ). Dal nostro calzino div. è pieno di calzini che vengono riformulati a casaccio, può facilmente iniziare a riempire il divario sul lato destro della riga centrale e riversare per iniziare la riga inferiore.

Nessun calzini dovrà essere tagliato a metà per questo per accadere. Questo è il motivo per cui possono diventare in linea , mentre le t-shirt possono essere solo blocco in linea . Se le T-shirt sulla media media hanno preso solo il 60 per cento della larghezza, i calzini & lt; div & gt; Sposterebbe per riempire l'intero spazio sul resto della riga.

Buon viaggio

Questo è l'ultimo CSS per la nostra valigia:

 .Delicato {
    blocco di visualizzazione;
    Larghezza: 60%;
}

.maglietta{
    display: blocco in linea;
    Larghezza: 20%;
}

.calzini{
    display: in linea;
}

Ecco un paio di scenari alternativi per illustrare i diversi usi del display. Se i delicati in alto avevano Display: blocco in linea , si adatterebbero a destra accanto alle magliette. Alcune delle T-shirt si spostano verso la riga superiore e il resto si adatterebbe di conseguenza. Non ci sarebbe un tampone confortevole a sinistra ea destra della camicia collegata.

Se ogni maglietta aveva blocco di visualizzazione , avresti una grande pila di T-shirt all'altra, una per linea. Se i calzini avessero Display: blocco in linea , sarebbero tutti seduti sulla fila in basso piuttosto che scorrere tra le due file. Alcune magliette sarebbero state spinte su un'altra fila, formando una quarta linea. Ci sarebbe un gap sulla destra della fila centrale delle T-shirt.

Con il metodo che ho delineato qui, finiamo con una valigia ben confezionata che consente di utilizzare il miglior uso dello spazio disponibile.

Questo articolo è originariamente apparso in Magazine netta Edizione 289; Compralo qui !

Articoli Correlati:

5 delle migliori risorse per l'apprendimento HTML e CSS
Costruisci layout complessi con PostCSS-FlexBox
28 esempi eccezionali di CSS

Comprensione della proprietà del display CSS

Gli oggetti delicati in alto

T-shirt ben confezionate

I calzini che riempiono le lacune

Buon viaggio

Come si fa - Articoli più popolari

Come disegnare figure più realistiche

Ricreare un manga classico

Vernice Acqua increspata in oli

Come progettare la tipografia isometrica

Come influenzare le classifiche di Google con il tuo contenuto

Come creare effetti sorprendenti con forme CSS

Dipingi un ritratto come i vecchi maestri

I segreti di soddisfare un brief design creativo

Categorie