inset-block-start
adalah sifat CSS logik yang menetapkan panjang elemen diimbangi ke arah blok dari pinggir permulaannya. Ini seperti menyatakan top
kecuali titik permulaannya ditentukan oleh elemen direction
, text-orientation
dan writing-mode
, seperti sifat logik yang lain.
Properti ini adalah sebahagian daripada spesifikasi CSS Logical Properties dan Nilai Level 1 yang kini dalam status Draf Editor. Itu bermaksud definisi dan maklumat mengenainya boleh berubah antara sekarang dan cadangan rasmi.
.element ( inset-block-start: 50px; position: relative; /* Apples to positioned elements */ writing-mode: vertical-rl; /* Determines the block start direction */ )
Jadi, sebagai contoh, jika mod tulisan itu ditetapkan kepada horizontal-lr
yang inset-block-start
hartanah akan bertindak sama seperti top
dan menetapkan elemen yang mengimbangi dari ia bermula tepi, yang atas. Anda juga perlu menyatakan yang jelas position
mengenai elemen yang sama agar elemen itu dapat dilaksanakan, seperti top
dan sifat mengimbangi fizikal yang lain.
Tetapi ubah elemen writing-mode
ke sesuatu seperti vertical-rl
dan tepi permulaan diputar ke arah menegak, bertindak lebih seperti left
harta benda.
Sintaks
inset-block-start: ;
- Nilai awal:
auto
- Berlaku untuk: elemen kedudukan
- Diwarisi: tidak
- Peratusan: untuk harta fizikal yang sepadan
- Nilai dikira: sama dengan
top
harta sepadan - Jenis animasi: mengikut jenis nilai yang dikira
Nilai
inset-block-start
mengambil nilai panjang dan menyokong kata kunci global. Nilai lalai adalah auto
.
/* Length values */ inset-block-start: 50px; inset-block-start: 4em; inset-block-start: 3.5rem inset-block-start: 25vh; /* Percentage values */ inset-block-start: 50%; /* Keyword values */ inset-block-start: auto; /* initial value */ /* Global values */ inset-block-start: initial inset-block-start: inherit; inset-block-start: unset;
Sokongan penyemak imbas
IE | Hujung | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
Tidak | Tidak | 63+ | Tidak | Tidak | Tidak |
Android Chrome | Android Firefox | Penyemak Imbas Android | Safari iOS | Opera Mini |
---|---|---|---|---|
Tidak | 79+ | Tidak | Tidak | Tidak |
Demo
Bacaan lanjut
- Spesifikasi Logik CSS dan Nilai Aras 1 spesifikasi (Draf Editor)
- Dokumentasi MDN
- Memahami Sifat dan Nilai Logik (Majalah Smashing)
- Sifat Logik CSS (Adrian Roselli)
- Peraturan mendatar dua arah dalam CSS (Hussein Al Hammad)