Block- og inline-retninger
Lær block- og inline-flowretningerne, og hvordan de svarer til lodrette og vandrette akser.
Block- og inline-retninger er en gratis CSS Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i CSS Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. CSS Academy-kurset indeholder 4 lektioner i alt.
Blokretning
Blokretningen er den retning, som bokse på blokniveau stables i. I vandrette skriftsystemer (LTR/RTL) går blokretningen fra top til bund. I lodrette skrivetilstande ændres den til fra venstre mod højre eller fra højre mod venstre.
Inline-retning
Inline-retningen er den retning, som teksten løber i inden for en linje. I LTR-sprog går inline-retningen fra venstre mod højre. I RTL går den fra højre mod venstre. I lodrette skrivetilstande går den fra top til bund.
Egenskaben writing-mode
writing-mode angiver tekstens grundlæggende skriveretning:
horizontal-tb— vandret tekst, fra top til bund (standard)vertical-rl— lodret tekst, kolonner fra højre mod venstrevertical-lr— lodret tekst, kolonner fra venstre mod højre
Vandret skriftsystem
I writing-mode: horizontal-tb (standard):
- Blokretning = lodret (top → bund)
- Inline-retning = vandret (fra venstre → højre i LTR, fra højre → venstre i RTL)
- Block-start = top, block-end = bund
- Inline-start = venstre (LTR) eller højre (RTL)
Lodret skriftsystem
I writing-mode: vertical-rl:
- Blokretning = vandret (højre → venstre)
- Inline-retning = lodret (top → bund)
- Block-start = højre, block-end = venstre
- Inline-start = top, inline-end = bund
Visualisering af akserne
Tænk på det som et koordinatsystem, der roterer sammen med skrivetilstanden. Logiske egenskaber beskriver positioner i forhold til dette roterbare system, ikke den faste skærm.
text-orientation
I lodrette skrivetilstande styrer text-orientation, hvordan de enkelte tegn vender:
mixed: Roter latinske tegn, og behold CJK-tegn opretståendeupright: Alle tegn står opretstående (til lodret CJK)sideways: Alle tegn er drejet om på siden
Lodrette etiketter på siden
En praktisk anvendelse er roterede etiketter i sidepaneler eller etiketter på diagramakser i sammenhænge med vandret skrift:
<div class="chart-label">Revenue</div>
Blanding af skrivetilstande
En beholder kan have én skrivetilstand, mens de enkelte inline-elementer har en anden. Det bruges til at blande latinsk tekst og CJK-tekst i samme afsnit.
block-size og inline-size
Logiske ækvivalenter til bredde og højde:
inline-size= bredde i horizontal-tb (inline-dimensionen)block-size= højde i horizontal-tb (blokdimensionen)
<div class="box">inline-size sets the width in LTR</div>
Egenskaben text-combine-upright
For lodret tekst, der indeholder tal eller forkortelser, holder text-combine-upright (tcy) korte tegnsekvenser opretstående og komprimeret i en enkelt lodret tekstcelle.
Hurtigt tjek
I writing-mode: horizontal-tb med et LTR-sprog, hvilken akse er så "blokaksen"?
Opsummering
Blokaksen er stablingsretningen for blokbokse, mens inline-aksen er tekstens løberetning. I vandrette skriftsystemer er blokaksen lodret, og inline-aksen er vandret. I lodret skrift bytter de retning. writing-mode styrer den grundlæggende akseretning. Logiske egenskaber tilpasser sig de akser, der aktuelt er blok- og inline-akser.
Lær CSS med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 40
- Lektioner
- 159
Ofte stillede spørgsmål
Er lektionen “Block- og inline-retninger” gratis?
Ja — hele teksten til “Block- og inline-retninger” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af CSS Academy-kurset, skal du opgradere til CoddyKit PRO. CSS Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Block- og inline-retninger”?
Lær block- og inline-flowretningerne, og hvordan de svarer til lodrette og vandrette akser. Du øver dig i CSS Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på CSS Academy?
Der kræves ingen tidligere erfaring. CSS Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.
Hvor lang tid tager lektionen “Block- og inline-retninger”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne CSS Academy-lektion?
Ja. Alle CSS Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Hvorfor logiske egenskaber: internationalisering
- Block- og inline-retninger
- Logisk margin, padding og border
- Logiske egenskaber i RTL-layouts