Panduan lengkap untuk sifat logik CSS, dengan helaian cheat-tutorial css-php.cn

Panduan lengkap untuk sifat logik CSS, dengan helaian cheat

Dalam artikel ini, kita akan menyelam ke dalam sifat logik CSS. Kami akan melihat apa yang mereka ada, bagaimana mereka bekerja, dan apa yang mereka berguna. Kami juga akan menyediakan lembaran cheat berguna supaya anda dapat dengan mudah membandingkan sifat logik CSS dengan setara fizikal mereka.

Walaupun anda memilih untuk tidak menggunakan sifat logik sendiri, adalah idea yang baik untuk mengenali mereka, kerana mereka mula muncul dalam kod lebih banyak laman web dan demo dalam talian. Contohnya, anda mungkin dapat melihat ini:

Kecuali anda biasa dengan sifat logik CSS, yang mungkin tidak akan bermakna kepada anda. Jika anda membaca, anda akan menjadi Ninja Harta Logik!

<span>p {
</span>  <span>margin-block-start: 1em;
</span><span>}
</span>

Salin selepas log masuk

Muat turun lembaran cheat PDF yang berguna logik kami.

Takeaways Key

sifat logik CSS menawarkan cara baru mengisytiharkan sifat, seperti lebar, ketinggian, padding, margin, dan sempadan, berdasarkan arah teks dan bukannya dimensi fizikal skrin komputer.

Apakah sifat logik?

Ciri -ciri logik menawarkan cara baru untuk mengisytiharkan sifat seperti lebar dan ketinggian, padding, margin, sempadan, radius sempadan, kedudukan, terapung, penjajaran teks, dan limpahan. Secara tradisinya, sifat -sifat ini telah diisytiharkan berhubung dengan dimensi fizikal skrin komputer - kiri, kanan, atas dan bawah. Ciri -ciri logik sebaliknya berdasarkan arah

arah teks

Beberapa bahasa berjalan dari kiri ke kanan, seperti bahasa Inggeris. Yang lain berjalan dari kanan ke kiri, seperti bahasa Arab. Lain -lain kadang -kadang berlari dari atas ke bawah, seperti Jepun. Banyak laman web mempunyai pelbagai versi dalam bahasa yang berbeza, seperti laman berita BBC dalam bahasa Inggeris, Arab dan Cina, atau Al Jazeera dalam bahasa Inggeris, Arab dan Cina.

Mempunyai gaya yang dikaitkan dengan arah teks menawarkan beberapa kelebihan, kerana mereka dapat menyesuaikan diri dengan perubahan arah teks dan dengan itu memohon di semua versi tapak.

Memahami Arah Teks

lebih baik memahami tujuan sifat logik, kita benar -benar perlu memahami beberapa perkara mengenai arah teks.

kita boleh menentukan arah teks dalam kedua -dua HTML dan CSS.

Daripada menggunakan atribut DIR dalam HTML, kita boleh menggunakan sifat arah dalam CSS. Untuk menentukan teks kiri-ke-kanan, gunakan arah: LTR, dan untuk teks kanan ke kiri, gunakan arah: RTL.

tidak semestinya sama ada kita menetapkan arah teks dalam html atau css, walaupun sering disyorkan bahawa kita menggunakan atribut dir di html, kerana memastikan teks akan berjalan ke arah yang betul walaupun ada yang salah dengan gaya kita lembaran.

kita juga boleh menggunakan CSS untuk menentukan teks itu berjalan dari atas ke bawah. Untuk teks menegak yang berjalan dari kiri ke kanan, kami menggunakan mod penulisan: menegak-LR, dan untuk teks menegak yang berjalan dari kanan ke kiri, kami menggunakan mod penulisan: menegak-RL. (Tidak ada pilihan untuk teks menegak.)

Dalam artikel ini, kita akan melihat satu siri demo yang membandingkan kesan sifat CSS fizikal dan logik. Demo ini akan menggambarkan arah teks menggunakan perenggan yang terdiri daripada emojis - semacam bahasa sejagat!

Di pena di bawah, kami mempunyai empat kotak yang mengandungi ayat emoji kami. Yang pertama ditetapkan kepada dir = "ltr" (lalai penyemak imbas), yang kedua untuk dir = "rtl", yang ketiga untuk menulis mod: menegak-LR, dan keempat untuk mod penulisan: menegak-RL.

Lihat pen Sifat Logik: Arah Teks oleh SitePoint (@SitePoint) pada codepen.

Dalam demo ini, anda dapat melihat bagaimana tetapan arah teks mempengaruhi susunan watak-watak dalam perenggan.

Selain: Lihat bagaimana baris bersatu dengan baik dalam demo di atas? Itu terima kasih kepada nilai subgrid baru dalam grid CSS. Kami meliputi cara untuk menyusun baris dengan subgrid dalam hujung cepat kami baru -baru ini.

memahami blok dan sebaris dalam CSS

Apabila CSS tumbuh dan berkembang, tumpuannya kurang pada perkara -perkara yang pergi, kanan, naik dan turun pada skrin, dan lebih banyak lagi pada aliran kandungan. Anda mungkin biasa dengan paksi utama dan silang di Flexbox, contohnya, yang berbeza -beza bergantung pada arah di mana teks mengalir, seperti juga arah kandungan grid.

Blok CSS dan sifat sebaris ditentukan oleh arahan teks. Dalam imej di bawah, blok dan arah sebaris berbeza -beza bergantung kepada arah teks.

Panduan lengkap untuk sifat logik CSS, dengan helaian cheat

Untuk perenggan yang berjalan kiri ke kanan, seperti yang satu ini, arah sebaris kiri/kanan, dan arah blok naik/turun.

Ciri -ciri logik ditetapkan dari segi blok dan dimensi sebaris, yang secara automatik bertukar sebagai perubahan arah teks. Ini menjadikan mereka lebih mudah disesuaikan daripada sifat fizikal.

permulaan dan akhir dalam talian ditentukan oleh mana teks bermula dan berakhir, seperti permulaan dan berakhir di arah blok.

~~Adakah sifat logik hanya untuk laman web berbilang bahasa?~~

Ciri -ciri logik berguna untuk semua laman web. Terdapat banyak situasi di mana laman web monolingual mungkin mendapat manfaat daripada menggunakan sifat logik.

Sebagai contoh, anda mungkin mendapati diri anda mengubah arah teks elemen semasa menggunakan pertanyaan media atau kontena. Bayangkan tajuk dengan sempadan merah kiri. Pada skrin kecil, tajuk mungkin mendatar, di atas perenggan berikut. Pada skrin lebar, anda mungkin menetapkan tajuk untuk memaparkan secara menegak. Imej di bawah menunjukkan apa yang akan berlaku jika anda menggunakan sempadan-kiri: 5px merah pepejal pada tajuk.

Setelah tajuk memaparkan secara menegak, yang meninggalkan sempadan tetap di sebelah kiri, ketika kami kemungkinan besar menginginkannya pada permulaan teks. Menggunakan sifat-sifat logik, sebaliknya kita dapat menentukan bahawa sempadan merah muncul pada permulaan tajuk tajuk (Border-Inline-Start), tidak kira apa arah yang ditunjuknya, menghasilkan hasil yang digambarkan di bawah.

Panduan lengkap untuk sifat logik CSS, dengan helaian cheat

(anda boleh menyemak demo langsung ini di codepen.)

Panduan lengkap untuk sifat logik CSS, dengan helaian cheat

Ini menunjukkan bagaimana, dengan sifat logik, susun atur kami lebih mudah disesuaikan untuk berubah tanpa perlu menambah CSS tambahan untuk senario yang berbeza.

Di samping itu, kami juga akan melihat bahawa sifat -sifat logik menawarkan sejumlah shorthands berguna yang membantu menjadikan CSS pengekodan lebih cekap untuk semua orang - sama ada bekerja dengan pelbagai bahasa atau tidak.

saiz (dimensi lebar dan ketinggian)

Daripada lebar dan ketinggian, yang berdasarkan skrin fizikal, sifat logik menggunakan saiz sebaris dan saiz blok. Untuk memutuskan yang hendak digunakan untuk menetapkan lebar dan ketinggian, kita perlu tahu arah mana teks akan masuk.

Dalam demo di bawah, perenggan di baris pertama telah diberikan saiz blok 80px. Dalam setiap kes, 80px ditetapkan pada arah blok, mengikut mana yang mungkin.

Bandingkan ini dengan baris kedua perenggan, yang masing -masing ditetapkan ke ketinggian: 80px. Dalam setiap kes, ketinggian ditetapkan berhubung dengan skrin.

Lihat pen Sifat Logik: Saiz (Lebar dan Ketinggian) oleh SitePoint (@SitePoint) pada codepen.

sifat saiz lain termasuk:

max-inline-saiz

Min-Inline-Size

saiz max-block

Min-block-Size

Lihat lembaran cheat untuk semua pilihan saiz dan cara menggunakannya dengan setiap arah teks, bersama dengan maklumat sokongan penyemak imbas.

margin

Menggunakan sifat logik, margin ditetapkan dengan variasi margin-inline dan margin-block.

Untuk bahasa kiri-ke-kanan, margin-inline-start: 40px akan memohon margin pada permulaan teks (di sebelah kiri skrin). Apabila digunakan pada bahasa kanan ke kiri, margin itu akan muncul di sebelah kanan skrin. Untuk teks menegak, margin akan muncul di bahagian atas, seperti yang ditunjukkan dalam demo di bawah.

Bandingkan kesan margin-inline-start yang digunakan untuk setiap perenggan pada baris pertama dengan margin-kiri: 40px digunakan untuk setiap perenggan di baris kedua dalam demo di bawah.

Lihat pen Sifat Logik: Margin oleh SitePoint (@SitePoint) pada codepen.

sifat margin lain termasuk:

margin-inline-end

margin-block-start

margin-block-end

margin-inline

margin-block

Perhatikan bahawa margin-inline boleh digunakan sebagai singkat untuk margin-kiri dan margin-kanan, yang sangat berguna dalam banyak situasi-seperti margin-inline: auto.

Lihat lembaran cheat untuk semua pilihan margin dan maklumat sokongan penyemak imbas.

Padding

Menggunakan sifat logik, padding ditetapkan dengan variasi padding-inline dan padding-block.

Untuk bahasa kiri-ke-kanan, padding-block-start: 40px akan memohon padding di bahagian atas teks (di bahagian atas skrin). Apabila digunakan pada bahasa kanan ke kiri, padding itu juga akan muncul di bahagian atas skrin. Untuk teks menegak, padding akan muncul di sebelah kiri atau kanan, bergantung pada arah mendatarnya.

Bandingkan kesan padding-block-start pada baris pertama dengan padding-top: 40px digunakan untuk setiap perenggan di baris kedua dalam demo di bawah.

Lihat pen Ciri -ciri Logik: Padding oleh SitePoint (@SitePoint) pada codepen.

sifat padding lain termasuk:

padding-inline-start

padding-inline-end

padding-block-end

Padding-Inline

Padding-block

Perhatikan bahawa padding-inline boleh digunakan sebagai singkat untuk padding-kiri dan padding-kanan.

Lihat lembaran cheat untuk semua pilihan padding, dalam setiap arah teks, bersama -sama dengan butiran sokongan penyemak imbas.

inset (unsur -unsur yang diposisikan)

Adakah anda telah menjumpai harta inset yang sangat berguna? Ia digunakan untuk unsur -unsur kedudukan (seperti ketika anda menggunakan kedudukan: mutlak). Sebagai contoh, inset: 0 adalah singkat untuk atas: 0; Kanan: 0; Bawah: 0; Kiri: 0 ;.

Mari cuba ini dalam demo emoji kami. Yang mengandungi div ditetapkan ke kedudukan: relatif dan perenggan ditetapkan ke kedudukan: mutlak. Perenggan di baris pertama ditetapkan untuk inset-block-end: 30px, manakala mereka yang berada di barisan kedua ditetapkan secara fizikal ke bawah: 30px.

Lihat pen Sifat Logik: Inset oleh SitePoint (@SitePoint) pada codepen.

sifat lain untuk inset termasuk:

inset-block-start

inset-block

inset-inline-start

inset-inline-end

inset-inline

Perhatikan blok inset dan inset yang mudah, yang boleh digunakan hanya dalam dua arah. (Inset-block: 20px bersamaan dengan inset: 20px auto. Lihat demo mudah di sini.)

Lihat senarai penuh sifat inset dan bagaimana mereka bekerja dengan arah teks dalam lembaran cheat.

Borders

kita boleh menetapkan sempadan di sekeliling elemen dengan sempadan sempadan, seperti sempadan: 5px merah pepejal. Tetapi jika kita hanya mahu gaya sisi tertentu unsur, kita tiba-tiba berurusan dengan sempadan atas, sempadan bawah, sempadan kiri dan sempadan, yang mana terdapat kesamaan logik.

sempadan sedikit lebih terlibat, kerana mereka melibatkan tiga nilai - lebar (ketebalan sempadan), gaya (pepejal, bertitik, dan sebagainya), dan warna.

mari kita lihat apa yang berlaku apabila kita memohon sempadan-baris-permulaan: 5px merah pepejal ke perenggan kita, dan bandingkan dengan sempadan-kiri: 5px pepejal merah ;.

Lihat pen Sifat Logik: Sempadan oleh SitePoint (@SitePoint) pada codepen.

sifat logik lain untuk sempadan termasuk:

border-inline-end

Border-block-start

Border-block-end

Border-Inline

Border-block

Perhatikan bahawa sempadan-garis adalah satu kecenderungan yang bagus untuk sempadan: kiri dan sempadan kanan dalam aliran kiri ke kanan, dan blok sempadan untuk sempadan atas dan sempadan sempadan.
kita boleh menggerudi lebih jauh ke dalam sifat logik sempadan untuk menargetkan hanya satu nilai. Untuk lebar kita mempunyai ini:

Border-block-start-width

Border-block-end-width

Border-block-width

Border-inline-start-width

Border-inline-end-width

Border-inline-width

untuk gaya kita mempunyai ini:

Border-block-start-style

Border-block-end-style

Sempadan-blok-gaya

Border-inline-start-style

Border-inline-end-style

Border-inline-style

untuk warna kita mempunyai ini:

Border-block-start-color

Border-block-end-color

Border-block-color

Border-inline-start-color

border-inline-end-color

Border-inline-color

Lihat lembaran cheat untuk semua kombinasi dan permutasi sifat -sifat ini kerana ia memohon kepada setiap arah teks.
Radius sempadan

kita boleh menetapkan jejari sempadan ke semua sudut elemen dengan harta radius sempadan. Jika kita mensasarkan sudut individu dengan sifat fizikal, kita mula -mula mempertimbangkan sama ada ia berada di bahagian atas atau bawah elemen, dan kemudian sama ada ia berada di sebelah kiri atau kanan elemen. Oleh itu, sudut kiri atas ditentukan dengan-top-left-radius.

Apabila menetapkan jejari sempadan dengan sifat logik, bukannya atas/bawah kiri/kanan, kita perlu memikirkan blok [start/end] -inline [start-end].

ia Pilihan di tengah:

p { margin-block-start: 1em; } 
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk

Pada baris pertama demo berikut, kami menetapkan jejari sempadan 20px pada permulaan blok dan arahan teks sebaris dengan Radius mula-mula sempadan. Bandingkan dengan border-top-left-radius di baris kedua.

Lihat pen Sifat Logik: Radius Sempadan oleh SitePoint (@SitePoint) pada codepen.

tidak ada apa -apa shorthands khas di sini, jadi jika anda mahu pusingan dua sudut, anda perlu melakukan sesuatu seperti ini:

-start-start- -end-start- -start-end- -end-end-
Salin selepas log masuk

oh baik! (Lihat demo di sini.)

Lihat lembaran cheat untuk semua pilihan radius sempadan dan maklumat sokongan penyemak imbas. Ia mengambil masa lebih lama untuk sifat logik radius sempadan untuk disokong oleh penyemak imbas, tetapi sokongan kini baik dalam pelayar moden.

Terapung dan membersihkan

sifat logik untuk terapung dan jelas menawarkan pilihan baru untuk mengapung dan membersihkan elemen. Sebelum sifat logik, satu -satunya pilihan adalah terapung: kiri dan terapung: kanan, jelas: kiri, dan jelas: kanan. Di mana teks menegak, tidak ada pilihan untuk terapung ke arah yang sama seperti teks.

Dengan sifat-sifat logik, terapung dan penjelasan kini boleh dilakukan secara khusus berhubung dengan aliran sebaris teks, terima kasih kepada permulaan dan akhir-akhir.

Dalam demo di bawah, elemen span diapungkan dengan nilai logik dalam talian, berbanding dengan nilai fizikal yang tersisa di baris kedua.

Lihat pen Sifat Logik: Terapung oleh SitePoint (@SitePoint) pada codepen.

Nilai permulaan dan inline-end juga digunakan untuk harta yang jelas. (Inilah demo codepen itu.)

Tidak perlu alternatif logik untuk jelas: kedua -duanya, kerana ia sudah membersihkan dalam kedua -dua arah inline - yang agak logik!

penjajaran teks

Kami sudah mempunyai nilai penjajaran teks seperti kiri, kanan, pusat, dan membenarkan. Dua nilai logik kini telah ditambah: Mula dan akhir. Mereka boleh digunakan untuk menyelaraskan teks sepanjang paksi sebaris, tidak kira apa arahnya berjalan.

Dalam demo di bawah, perenggan di baris pertama telah ditetapkan ke Text-Align: End. Seperti yang anda lihat, emojis semuanya ditolak ke hujung paksi sebaris.

Lihat pen Sifat Logik: Penjajaran Teks oleh SitePoint (@SitePoint) pada codepen.

Lembaran cheat menunjukkan cara memohon nilai permulaan dan akhir untuk berfungsi dengan pelbagai arah teks.

saiz semula

Resize Property membolehkan mengubah saiz unsur -unsur tertentu dalam arah yang ditentukan, dan sekarang terdapat pilihan dalam talian dan blok.

Demo di bawah menunjukkan perbezaan antara saiz semula: inline dan saiz semula: mendatar. (Terdapat pemegang saiz semula kecil di sudut kanan bawah setiap kotak yang anda boleh seret.)

Lihat pen Sifat Logik: Saiz semula oleh SitePoint (@SitePoint) pada codepen.

(dalam demo di atas, saiz semula kotak kanan ke kiri agak liar kerana dir = "RTL" tidak digunakan untuk keseluruhan dokumen tetapi hanya untuk div yang mengandungi.)

Overflow

Ciri-ciri fizikal Overflow-X dan Overflow-Y kini mempunyai pelengkap logik limpahan-inllow dan limpahan-blok.

Perhatikan bahawa terdapat sedikit sokongan untuk sifat -sifat baru ini pada masa penulisan (April 2024).

Overscroll-Behavior

Harta overscroll-tingkah laku adalah yang baru yang menyempurnakan bagaimana tatal elemen melimpah. Kami tidak akan menyelidikinya di sini, tetapi anda boleh membaca lebih lanjut mengenai MDN.

cukup untuk mengatakan bahawa terdapat versi logik sifat -sifat ini serta fizikal. Sebagai contoh, overscroll-tehavior-X untuk bahasa kiri-ke-kanan boleh digantikan oleh overscroll-tingkah laku-inline, dan sebagainya. (Lihat lembaran cheat untuk senarai lengkap contoh.)

Sokongan penyemak imbas

Sokongan penyemak imbas untuk sifat logik CSS maju dengan cepat pada awal 2020 -an, dan sifat logik kini sangat disokong di seluruh pelayar utama.

Ciri -ciri logik membawa berat yang sama seperti rakan fizikal mereka, jadi jika anda bimbang tentang pengalaman dalam pelayar yang lebih tua, anda boleh mengisytiharkan dua nilai, seperti:

p { margin-block-start: 1em; } 
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk

pelayar yang lebih tua akan menggunakan perisytiharan pertama, sementara yang lebih baru akan menggunakan yang kedua.
Walau bagaimanapun, ia akan membosankan untuk menduplikasi kod seperti ini sepanjang lembaran gaya, jadi jika anda benar -benar bimbang tentang pelayar yang lebih tua, mungkin mudah pada sifat logik untuk sekarang.

Caniuse mempunyai gambaran keseluruhan sokongan harta logik, dan setiap bahagian dalam lembaran cheat juga mempunyai pautan untuk menyokong sifat tertentu.

Kesimpulan

Dalam artikel ini, kami telah meliputi hampir setiap harta logik yang kini tersedia. (Anda juga boleh menyemak sifat-sifat logik untuk kapsyen dan untuk penahanan saiz jika anda ingin pergi lebih jauh.)

Jika tidak ada yang lain, ia patut memahami apa sifat logik dan cara menggunakannya, walaupun anda memilih untuk tidak menggunakannya buat masa ini. Sekurang -kurangnya anda akan memahami kod harta logik CSS baru yang muncul di seluruh web sekarang.

Ciri -ciri logik menawarkan faedah, walaupun anda tidak bekerja di laman web berbilang bahasa. Pelbagai shorthands seperti margin-inline sangat berguna dan alat yang bagus untuk dimiliki dalam kit anda.

Jika anda telah membaca dengan betul melalui artikel ini, anda harus dapat mengenali sifat -sifat logik di mana sahaja ia muncul. (Perhatikan kata kunci blok dan sebaris itu! Mudah -mudahan anda juga cukup yakin untuk menggunakannya sesekali di CSS anda - kecuali jika anda telah diilhamkan untuk pergi ninja penuh!

Jangan lupa untuk memuat turun Lembaran Cheat PDF yang berguna.

Atas ialah kandungan terperinci Panduan lengkap untuk sifat logik CSS, dengan helaian cheat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!