Ieliktnis-bloks - CSS-triki

Satura rādītājs:

Anonim

inset-blockir stenogrāfisks loģisks CSS rekvizīts, kas nosaka elementa nobīdi bloka virzienā, apvienojot inset-block-startun inset-block-end. Tas ir veida, piemēram, paziņojot, topun bottomizņemot tās sākuma un beigu punkti nosaka elements ir direction, text-orientationun writing-mode, tāpat kā citiem loģiskās īpašības.

Īpašums ir daļa no CSS loģisko rekvizītu un vērtību 1. līmeņa specifikācijas, kas pašlaik atrodas redaktora melnraksta statusā. Tas nozīmē, ka definīcija un informācija par to var mainīties starp pašreizējo un oficiālo ieteikumu.

.element ( inset-block: 50px 15%; position: relative; /* Apples to positioned elements */ writing-mode: vertical-rl; /* Determines the block start direction */ )

Tā, piemēram, ja rakstīšanas režīms ir iestatīts horizontal-lruz inset-blockīpašumu darbosies tāpat kā iestatījumu topun bottomun noteikt elements ir nobīde no apakšējās malas. positionLai tas stātos spēkā, tāpat kā fizisko nobīdes rekvizītiem, tajā pašā elementā jums pat jānorāda precīzs .

Mainiet elementu writing-modeuz kaut ko līdzīgu, vertical-lrun apakšējā mala tiek pagriezta vertikālā virzienā, darbojoties vairāk kā leftun rightīpašības.

Sintakse

inset-block: ;
  • Sākotnējā vērtība: auto
  • Attiecas uz: izvietotajiem elementiem
  • Mantots: nē
  • Procenti: tāpat kā attiecīgajam fiziskajam īpašumam
  • Aprēķinātā vērtība: tāda pati kā atbilstošā topun bottomīpašības
  • Animācijas tips: pēc aprēķinātās vērtības veida

Vērtības

inset-blockņem garuma vērtību un atbalsta globālos atslēgvārdus. Tās noklusējuma vērtība ir auto.

/* Length values */ inset-block: 50px; inset-block: 4em; inset-block: 3.5rem inset-block: 25vh; /* Percentage values */ inset-block: 50%; /* Keyword values */ inset-block: auto; /* initial value */ /* Global values */ inset-block: initial inset-block: inherit; inset-block: unset;

Pārlūkprogrammas atbalsts

IE Mala Firefox Chrome Safari Opera
Nē Nē 63+ Nē Nē Nē
Android Chrome Android Firefox Android pārlūks iOS Safari Opera Mini
Nē 79+ Nē Nē Nē
Avots: caniuse

Demonstrācija

Turpmāka lasīšana

  • CSS loģisko īpašību un vērtību 1. līmeņa specifikācija (redaktora melnraksts)
  • MDN dokumentācija
  • Izpratne par loģiskajām īpašībām un vērtībām (žurnāls Smashing)
  • CSS loģiskās īpašības (Adrians Roselli)
  • Divvirzienu horizontālie noteikumi CSS (Hussein Al Hammad)