De CSS-display-eigenschap begrijpen

Sep 12, 2025

Procedures

Het is middernacht, en die div Op uw site ziet er nog steeds uit als de speelgoedkist van een kind. Alle elementen zijn een jumbled puinhoop en elke keer dat je speelt CSS 's Scherm eigendom, ze herschikken zichzelf in een heel ander beetje onzin.

Als je op mij bent, zul je dit waarschijnlijk oplossen door onder je adem te mompelen en consistent agressiever te worden met je toetsenbord. En hoewel die strategie eerder voor mij heeft gewerkt, heb ik onlangs een betere manier gevonden om de Scherm eigendom.

Het blijkt de basis van Scherm zijn veel eenvoudiger dan ik oorspronkelijk dacht. In feite gebruiken ze dezelfde principes als een koffer inpakken. Ik ga dekken DISPLAY: BLOK inline-blok en in lijn Als je al eerder een koffer hebt geregeld, zie je de parallel. Als je het soort persoon bent dat al je kleding op een hukhrazard-manier ram, is er maar zo veel dat ik voor je kan doen.

Onze koffer bevat drie soorten kleding:

Delicates, zoals een collared shirt
T-shirts die kunnen worden opgerold
Sokken of ondergoed die in gaten kunnen worden gevuld

Als we de koffer in HTML hebben gemodelleerd, zou het er als volgt uitzien:

 & lt; div class = 'koffer' & gt;
    & lt; div class = 'delicate' & gt; & lt; / div & gt;
    & lt; div class = 't-shirt' & gt; & lt; / div & gt;
    & lt; div class = 't-shirt' & gt; & lt; / div & gt;
    & lt; div class = 't-shirt' & gt; & lt; / div & gt;
    & lt; div class = 't-shirt' & gt; & lt; / div & gt;
    & lt; div class = 'sokken' & gt; & lt; / div & gt;
    & lt; div class = 't-shirt' & gt; & lt; / div & gt;
    & lt; div class = 't-shirt' & gt; & lt; / div & gt;
    & lt; div class = 't-shirt' & gt; & lt; / div & gt;
    & lt; div class = 't-shirt' & gt; & lt; / div & gt;
& lt; / div & gt;

De delicate items bovenaan

The collared shirt sits on a pile of the clothes beneath it. It is the only item that occupies its own layer — Het collared shirt zit op een stapel van de kleren eronder. Het is het enige item dat zijn eigen laag inneemt

DISPLAY: BLOK is de standaardinstelling voor de meeste HTML-elementen. Dat betekent dat het element de volledige horizontale ruimte in zijn container inneemt div Als het naast andere sibling-elementen staat, start het een nieuwe regel en sta niet toe dat andere elementen op zijn lijn staan. Het is vergelijkbaar met de delicate items die u aan de bovenkant van uw koffer legt. Dit zijn delicate of slimme artikelen zoals Collared Shirts. Je wilt niet dat ze worden gerimpeld, dus je zorgt ervoor dat ze niet worden geduwd tegen andere kledingstukken.

Dit brengt een van de moeilijkste delen van DISPLAY: BLOK Merk op hoe het collared shirt de volledige breedte van de koffer niet bezet? Dat betekent niet dat andere items op zijn niveau zullen springen. Laten we zeggen dat dit shirt 60 procent van de breedte van de koffer is; Het blokkeert nog steeds andere elementen om het op het hoogste niveau aan te sluiten.

Daarom is er een oranje rand op de foto. EEN DISPLAY: BLOK Element voegt automatisch een marge eromheen toe als het de volledige horizontale ruimte niet bezet.

Netjes verpakt T-shirts

Here we can see the top and bottom rows of T-shirts, with four shirts in each — Hier kunnen we de bovenste en onderste rijen van t-shirts zien, met vier shirts in elk

De meeste van je koffer is waarschijnlijk vol van de rest van je kleding voor je reis. Omwille van de eenvoud gaan we dit naar beneden knippen tot alleen t-shirts. Er is een groot debat op internet of het vouwen of het rollen efficiënter is. Ik ben een opvouwbaar soort persoon.

Hoe dan ook, om in de meeste items te passen, valt u uw t-shirts naast elkaar op. Dit is precies wat Display: Inline-Block is bedoeld voor. Deze elementen kunnen naast elkaar op dezelfde lijn zitten, evenals naast Display: Inline elementen.

in tegenstelling tot Display: Inline elementen, een inline-blok element zal naar de volgende regel gaan als deze niet past in de bevattende div naast de andere inline-blok elementen. Om een t-shirt op de volgende rij te hebben, moet u het in tweeën snijden en de resterende helft gebruiken om een nieuwe rij te starten. Inline-blok Elementen mogen niet in de helft splitsen als ze niet passen op een lijn.

De sokken die de gaten invullen

The socks are inline elements, which means they will fill the gaps around the T-shirts — De sokken zijn inline elementen, wat betekent dat ze de gaten rond de T-shirts zullen vullen

Kom terug naar de originele HTML en je zult opmerken dat er één sokken is & LT; DIV & GT; tussen de acht T-shirts. Maar kijk eens naar de horizontale weergave van de koffer aan de rechterkant. Als er één sokken zijn & LT; DIV & GT; , hoe kan het de middelste rij beëindigen en de onderste rij beginnen? Dit is het doel van Display: Inline

Een in lijn element zal naar de volgende regel worden gemorst als deze de breedte van de div (Op deze manier is het anders dan inline-blok of blok Sinds onze sokken div zit vol met sokken die lukraak zijn gevuld in lacunes, het kan gemakkelijk beginnen met het vullen van de kloof aan de rechterkant van de middelste rij en morsen naar boven om de onderste rij te beginnen.

Er moeten geen sokken in de helft worden gesneden om dit te laten gebeuren. Dit is de reden waarom ze kunnen worden in lijn , terwijl t-shirts alleen kunnen zijn inline-blok Als de T-shirts op de middelste rij slechts 60 procent van de breedte, hebben, de sokken & LT; DIV & GT; zou opdagen om de hele ruimte op de rest van de rij te vullen.

Goede reis

Dit is de laatste CSS voor onze koffer:

. Delicate {
    Weergave: blok;
    Breedte: 60%;


.t-shirt{
    Display: Inline-Block;
    Breedte: 20%;


.socks {
    Weergave: inline;
}

Hier zijn een paar alternatieve scenario's om het verschillende gebruikswijzen te illustreren. Als de delicaten op de top had Display: Inline-Block , ze passen in de t-shirts in de buurt. Sommige van de t-shirts zouden naar de toplijn gaan en de rest zou dienovereenkomstig aanpassen. Er is geen comfortabele buffer links en rechts van het collared shirt.

Als elk t-shirt had weergaveblok , je zou een enorme stapel t-shirts op elkaar hebben, één per regel. Als de sokken hadden Display: Inline-Block , ze zouden allemaal op de onderste rij zitten dan tussen de twee rijen stroomt. Sommige t-shirts zouden op een andere rij worden geduwd en vormen een vierde regel. Er zou een opening zijn aan de rechterkant van de middelste rij T-shirts.

Met de methode die ik hier heb geschetst, eindigen we met een netjes verpakte koffer die het beste gebruik maakt van de beschikbare ruimte.

Dit artikel verscheen oorspronkelijk in netto tijdschrift uitgave 289; koop het hier

Gerelateerde artikelen:

5 van de beste middelen voor het leren van HTML en CSS
Bouw complexe lay-outs met de PostCSS-FLEXBOX
28 uitstekende voorbeelden van CSS

De CSS-display-eigenschap begrijpen

De delicate items bovenaan

Netjes verpakt T-shirts

De sokken die de gaten invullen

Goede reis

Procedures - Meest populaire artikelen

Gebruik negatieve ruimte om betere handen te tekenen

Animate SVG met JavaScript

Maak een eenvoudige kleurenkaart

Maak een flexibele carrouselcomponent

6 manieren om uw modellering te versnellen

Ontwerpen van responsieve en apparaat-agnostische vormen

Hoe maak je 3D-belettering in Illustrator

Maak een hi-fidelity prototype in atomic

Categorieën