CSS Academy · Pelajaran

Arah Blok dan Sebaris

Pelajari arah aliran blok dan sebaris serta cara ia dipetakan kepada paksi menegak dan mendatar.

Pelajaran 2 daripada 413 langkah

Arah Blok dan Sebaris ialah pelajaran CSS Academy percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran CSS Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus CSS Academy merangkumi sejumlah 4 pelajaran.

Arah Blok

Arah blok ialah arah kotak peringkat blok disusun bertindan. Dalam sistem penulisan mendatar (LTR/RTL), arah blok adalah dari atas ke bawah. Dalam mod penulisan menegak, arah ini berubah menjadi dari kiri ke kanan atau dari kanan ke kiri.

Arah Sebaris

Arah sebaris ialah arah teks mengalir dalam sesuatu baris. Dalam bahasa LTR, arah sebaris adalah dari kiri ke kanan. Dalam RTL, arah ini adalah dari kanan ke kiri. Dalam mod penulisan menegak, arah ini menjadi dari atas ke bawah.

Sifat writing-mode

writing-mode menetapkan orientasi asas aliran teks:

  • horizontal-tb — teks mendatar, dari atas ke bawah (lalai)
  • vertical-rl — teks menegak, lajur dari kanan ke kiri
  • vertical-lr — teks menegak, lajur dari kiri ke kanan

Sistem Penulisan Mendatar

Dalam writing-mode: horizontal-tb (lalai):

  • Arah blok = menegak (atas → bawah)
  • Arah sebaris = mendatar (kiri → kanan dalam LTR, kanan → kiri dalam RTL)
  • Permulaan blok = atas, penghujung blok = bawah
  • Permulaan sebaris = kiri (LTR) atau kanan (RTL)

Sistem Penulisan Menegak

Dalam writing-mode: vertical-rl:

  • Arah blok = mendatar (kanan → kiri)
  • Arah sebaris = menegak (atas → bawah)
  • Permulaan blok = kanan, penghujung blok = kiri
  • Permulaan sebaris = atas, penghujung sebaris = bawah

Membayangkan Paksi

Bayangkan ia sebagai sistem koordinat yang berputar mengikut mod penulisan. Sifat logik menerangkan kedudukan yang berkaitan dengan sistem yang boleh berputar ini, bukannya skrin yang tetap.

text-orientation

Dalam mod penulisan menegak, text-orientation mengawal orientasi setiap aksara:

  • mixed: Putarkan aksara Latin; kekalkan CJK dalam kedudukan tegak
  • upright: Semua aksara dalam kedudukan tegak (untuk CJK menegak)
  • sideways: Semua aksara diputar mengiring

Label Menegak Mengiring

Kegunaan praktikal: label bar sisi atau label paksi carta yang diputar dalam konteks penulisan mendatar:

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

Mencampurkan Mod Penulisan

Sesuatu bekas boleh mempunyai satu mod penulisan, manakala elemen sebaris di dalamnya mempunyai mod yang lain. Hal ini digunakan untuk mencampurkan teks Latin dan CJK dalam perenggan yang sama.

Block-size dan Inline-size

Padanan logik untuk lebar dan tinggi:

  • inline-size = lebar dalam horizontal-tb (dimensi sebaris)
  • block-size = tinggi dalam horizontal-tb (dimensi blok)
<div class="box">inline-size sets the width in LTR</div>

Sifat text-combine-upright

Untuk teks menegak yang mengandungi nombor atau singkatan, text-combine-upright (tcy) mengekalkan rentetan aksara pendek dalam kedudukan tegak dan memampatkannya dalam satu sel teks menegak.

Semakan Ringkas

Dalam writing-mode: horizontal-tb dengan bahasa LTR, paksi yang manakah merupakan paksi "blok"?

Ringkasan

Paksi blok ialah arah susunan kotak blok; paksi sebaris ialah arah aliran teks. Dalam sistem penulisan mendatar, blok = menegak dan sebaris = mendatar. Dalam penulisan menegak, kedua-duanya bertukar. writing-mode mengawal orientasi asas paksi. Sifat logik menyesuaikan diri dengan paksi yang sedang menjadi blok dan sebaris.

Percuma untuk bermula

Pelajari CSS dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus
40
Pelajaran
159

Soalan Lazim

Adakah pelajaran “Arah Blok dan Sebaris” percuma?

Ya — teks penuh “Arah Blok dan Sebaris” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus CSS Academy, tingkat taraf kepada CoddyKit PRO. Kursus CSS Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Arah Blok dan Sebaris”?

Pelajari arah aliran blok dan sebaris serta cara ia dipetakan kepada paksi menegak dan mendatar. Anda berlatih CSS Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan CSS Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran CSS Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.

Berapa lamakah pelajaran “Arah Blok dan Sebaris” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran CSS Academy ini?

Ya. Setiap pelajaran CSS Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

  1. Mengapa Sifat Logik: Pengantarabangsaan
  2. Arah Blok dan Sebaris
  3. Jidar, Lapik dan Sempadan Logik
  4. Sifat Logik dalam Susun Atur RTL
← Kembali ke CSS Academy