Block- och inline-riktningar
Lär Er block- och inlineflödets riktningar och hur de motsvarar vertikala och horisontella axlar.
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änstervertical-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åendeupright: 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.
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
- Varför logiska egenskaper: internationalisering
- Block- och inline-riktningar
- Logiska marginaler, padding och kantlinjer
- Logiska egenskaper i RTL-layouter