Förstå CSS-skärmens egendom

Sep 14, 2025

Hur

Det är midnatt, och den där div På din webbplats ser fortfarande ut som ett barns leksaksbröst. Alla element är en jumbled röra, och varje gång du spelar med Css s visa egendom, de omarrangerar sig i en helt annan bit av nonsens.

Om du är som jag, kommer du förmodligen att lösa detta genom att mumla under andan och bli konsekvent mer aggressiv med ditt tangentbord. Och även om den strategin har fungerat för mig tidigare, satt jag nyligen att hitta ett bättre sätt att förstå visa fast egendom.

Det visar sig att grunderna i visa är mycket enklare än jag ursprungligen trodde. Faktum är att de använder samma principer som packar en resväska. Jag ska täcka Display: Blockera , inline-block och i kö . Om du har ordnat en resväska på ett ordnat sätt innan, kommer du att se parallellen. Om du är den typ av person som ramar alla dina kläder på ett slumpmässigt sätt - det är bara så mycket jag kan göra för dig.

Vår resväska innehåller tre typer av kläder:

Delikat, som en collared tröja
T-tröjor som kan rullas upp
Strumpor eller underkläder som kan fyllas i luckor

För referens, om vi modellerade resväskan i HTML, skulle det se ut så här:

 & lt; div class = 'resväska' & gt;
    & lt; div class = 'Delikat' & 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 = 'socks' & 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;

De känsliga föremålen ovanpå

The collared shirt sits on a pile of the clothes beneath it. It is the only item that occupies its own layer — Den collared tröjan sitter på en hög med kläderna under den. Det är det enda objektet som upptar sitt eget lager

Display: Blockera är standard för de flesta HTML-element. Det betyder att elementet upptar hela horisontellt utrymme i sin behållare div . Om det ligger bredvid andra syskonelement, kommer det att starta en ny linje och inte tillåta andra element på sin linje. Det liknar de känsliga objekten du lägger på toppen av din resväska. Dessa är känsliga eller smarta artiklar som collared shirts. Du vill inte att de ska skrynkliga, så du ser till att de inte är tryckta mot andra kläder.

Detta ger en av de tuffaste delarna av Display: Blockera . Lägg märke till hur den collared skjortan inte upptar hela bredden på resväskan? Det betyder inte att andra föremål kommer att hoppa upp till sin nivå. Låt oss säga att denna skjorta är 60 procent av resväskans bredd; Det skulle fortfarande blockera andra element från att ansluta sig till den på toppnivån.

Det är därför det finns en orange gräns på bilden. A Display: Blockera Elementet lägger automatiskt till en marginal om den om den inte upptar hela det horisontella utrymmet.

Snyggt packade t-shirts

Here we can see the top and bottom rows of T-shirts, with four shirts in each — Här kan vi se de övre och nedre raderna av t-shirts, med fyra skjortor i vardera

Det mesta av din resväska är förmodligen full av resten av dina kläder för din resa. För enkelhets skull kommer vi att skära ner detta till bara t-shirts. Det finns en stor debatt på Internet om huruvida vikning eller rullning är effektivare. Jag är en vikande typ av person.

Hur som helst, för att passa de flesta föremålen, raderar du dina t-shirts sida vid sida. Detta är exakt vad Visa: Inline-Block är avsedd för. Dessa element kan sitta bredvid varandra på samma linje, liksom bredvid Visa: Inline element.

Till skillnad från Visa: Inline element, en inline-block elementet kommer att flytta till nästa rad om det inte passar in i dess innehållande div tillsammans med den andra inline-block element. För att få en t-shirt spill på nästa v skulle du behöva klippa den i hälften och använda den återstående halvan för att starta en ny rad. Inline-block Elementen får inte delas upp i hälften om de inte passar på en linje.

Strumporna som fyller i luckorna

The socks are inline elements, which means they will fill the gaps around the T-shirts — Strumporna är inline-element, vilket innebär att de fyller luckorna runt T-shirtsna

Kolla tillbaka till den ursprungliga HTML och du noterar att det finns en strumpor & lt; div & gt; mellan de åtta T-shirtsna. Men ta en titt på den horisontella utsikten över resväskan till höger. Om det finns en strumpor & lt; div & gt; , hur kan det sluta mellersta raden och börja den nedre raden? Detta är syftet med Visa: Inline !

En i kö elementet kommer att spillas över till nästa rad om det överstiger bredden på div (På så sätt är det annorlunda än inline-block eller blockera ). Sedan våra strumpor div är full av strumpor som är slumpmässigt fyllda i luckor, det kan lätt börja fylla gapet på höger sida av mittraden och spill över för att börja den nedre raden.

Inga strumpor måste skäras i hälften för att detta ska hända. Det är därför de kan bli i kö , medan t-shirts kan bara vara inline-block . Om T-shirtsna på Middle-raden bara tog upp 60 procent av bredden, strumporna & lt; div & gt; skulle gå upp för att fylla hela utrymmet på resten av raden.

Trevlig resa

Detta är den sista CSS för vår resväska:

 .Delikat {
    Visa: Block;
    Bredd: 60%;
}

.tshirt {
    Visa: Inline-block;
    Bredd: 20%;
}

.strumpor{
    Visa: Inline;
}

Här är ett par alternativa scenarier för att illustrera olika användningsområden. Om de delikat på toppen hade Visa: Inline-Block , de skulle passa in rätt bredvid T-shirtsna. Några av t-shirtsna skulle gå upp till topplinjen, och resten skulle justeras i enlighet med detta. Det skulle inte finnas någon bekväm buffert till vänster och höger om den collared tröjan.

Om varje t-shirt hade bildblock , du skulle ha en massiv stack av t-shirts ovanpå varandra, en per rad. Om strumporna hade Visa: Inline-Block , de skulle alla sitta på bottenrassen istället för att strömma mellan de två raderna. Vissa t-shirts skulle skjutas på en annan rad, som bildar en fjärde linje. Det skulle finnas ett gap till höger om den mellersta raden av T-shirts.

Med den metod som jag har skisserat här, slutar vi med en snyggt packad resväska som utnyttjar det lediga utrymmet.

Denna artikel uppträdde ursprungligen i nätmagasin utgåva 289; köp det här !

Relaterade artiklar:

5 av de bästa resurserna för att lära sig HTML och CSS
Bygg komplexa layouter med postcss-flexbox
28 Utestående exempel på CSS

Förstå CSS-skärmens egendom

De känsliga föremålen ovanpå

Snyggt packade t-shirts

Strumporna som fyller i luckorna

Trevlig resa

Hur - Mest populära artiklar

Hur man ritar en ros: nybörjare och avancerade tips

Facebook Sekretessinställningar: Hur man håller din profil privat

Hur man ritar en arm

Bygg en blogg med rutnät och Flexbox

Använd WordPress som en huvudlös CMS

13 Tips för att göra en VR-spelvärld

Hur man förbereder illustratorgrafik för After Effects

Kombinera traditionella och digitala färdigheter för att skapa ett komiskt skydd

Kategorier