CSS Academy · Lektion

Block- och inline-riktningar

Lär Er block- och inlineflödets riktningar och hur de motsvarar vertikala och horisontella axlar.

Lektion 2 av 413 steg

Block- och inline-riktningar är en gratis lektion i CSS Academy på CoddyKit. Detta är lektion 2 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för CSS Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i CSS Academy innehåller totalt 4 lektioner.

Blockriktning

Blockriktningen är den riktning som blocknivåboxar staplas i. I horisontella skrivsystem (LTR/RTL) går blockriktningen uppifrån och ned. I vertikala skrivlägen ändras den till från vänster till höger eller från höger till vänster.

Inline-riktning

Inline-riktningen är den riktning som text flödar i inom en rad. I LTR-språk går inline-riktningen från vänster till höger. I RTL går den från höger till vänster. I vertikala skrivlägen blir den uppifrån och ned.

Egenskapen writing-mode

writing-mode anger den grundläggande riktningen för textflödet:

  • horizontal-tb – horisontell text, uppifrån och ned (standard)
  • vertical-rl – vertikal text, kolumner från höger till vänster
  • vertical-lr – vertikal text, kolumner från vänster till höger

Horisontellt skrivsystem

I writing-mode: horizontal-tb (standard):

  • Blockriktning = vertikal (uppifrån → ned)
  • Inline-riktning = horisontell (vänster → höger i LTR, höger → vänster i RTL)
  • Block-start = top, block-end = bottom
  • Inline-start = vänster (LTR) eller höger (RTL)

Vertikalt skrivsystem

I writing-mode: vertical-rl:

  • Blockriktning = horisontell (höger → vänster)
  • Inline-riktning = vertikal (uppifrån → ned)
  • Block-start = höger, block-end = vänster
  • Inline-start = top, inline-end = bottom

Visualisera axlarna

Tänk på det som ett koordinatsystem som roterar med skrivläget. Logiska egenskaper beskriver positioner i förhållande till detta roterbara system, inte till den fasta skärmen.

text-orientation

I vertikala skrivlägen styr text-orientation hur enskilda tecken orienteras:

  • mixed: Rotera latinska tecken; behåll CJK-tecken upprättstående
  • upright: Alla tecken upprättstående (för vertikal CJK-text)
  • sideways: Rotera alla tecken åt sidan

Vertikala etiketter på sidan

En praktisk användning är roterade etiketter i sidopaneler eller etiketter på diagramaxlar i sammanhang med horisontellt skrivsätt:

<div class="chart-label">Revenue</div>

Blanda skrivlägen

En behållare kan ha ett skrivläge medan enskilda inline-element har ett annat. Detta används för att blanda latinsk text och CJK-text i samma stycke.

Block-size och inline-size

Logiska motsvarigheter till bredd och höjd:

  • inline-size = bredd i horizontal-tb (inline-dimensionen)
  • block-size = höjd i horizontal-tb (blockdimensionen)
<div class="box">inline-size sets the width in LTR</div>

Egenskapen text-combine-upright

För vertikal text som innehåller tal eller förkortningar håller text-combine-upright (tcy) korta teckensekvenser upprättstående och komprimerade inom en enda vertikal textcell.

Snabb kontroll

I writing-mode: horizontal-tb med ett LTR-språk, vilken axel är "block"-axeln?

Sammanfattning

Blockaxeln är staplingsriktningen för blockboxar; inlineaxeln är textflödets riktning. I horisontella skrivsystem är block = vertikal och inline = horisontell. I vertikalt skrivsätt vänds dessa. writing-mode styr den grundläggande axelorienteringen. Logiska egenskaper anpassas till de axlar som för närvarande är block- respektive inlineaxel.

Gratis att börja

Lär dig CSS med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser
40
Lektioner
159

Vanliga frågor

Är lektionen ”Block- och inline-riktningar” gratis?

Ja – hela texten till ”Block- och inline-riktningar” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i CSS Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i CSS Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Block- och inline-riktningar”?

Lär Er block- och inlineflödets riktningar och hur de motsvarar vertikala och horisontella axlar. Ni övar på CSS Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig CSS Academy?

Du behöver inga förkunskaper. Utbildningen i CSS Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.

Hur lång tid tar lektionen ”Block- och inline-riktningar”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här CSS Academy-lektionen?

Ja. Varje CSS Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

  1. Varför logiska egenskaper: internationalisering
  2. Block- och inline-riktningar
  3. Logiska marginaler, padding och kantlinjer
  4. Logiska egenskaper i RTL-layouter
← Tillbaka till CSS Academy