Michelle Barker cu postarea mea preferată pe blog: scurtă, practică și îți lasă o pepiță valoroasă pentru timpul tău. Aici, ea intră în prescurtarea proprietăților logice în CSS, în special cele care stabilesc lungimile doar pe o singură axă, să spunem doar axa bloc (verticală) sau doar axa în linie (orizontală).
Spun „block” și „inline” pentru că, în ceea ce privește proprietățile logice, axa x ar putea la fel de bine să se comporte ca o axă verticală în funcție de curent. writing-mode.
Deci, unde am avut mereu padding, margin, și border shorthands care pot suporta o sintaxă cu mai multe valori, niciuna dintre ele nu ne permite să declarăm lungimi pe o anumită axă fără a seta și o lungime pe cealaltă axă.
De exemplu:
/* This gives us margin on the inline axis */
margin: 0 3rem;…dar a trebuit să setăm cealaltă axă pentru a ajunge acolo. Cu proprietăți logice, totuși, avem scurtaturi suplimentare pentru fiecare axă, ceea ce înseamnă că putem indica margin-inline prescurtare pentru a lucra în mod specific pe axa inline:
margin-inline: 3rem;Michelle menționează în treacăt scurtarea proprietății logice preferate. De câte ori poziționați ceva pe acest gen de melodie:
.position-me {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}Putem să punem acele patru linii în cu inset: 0. Sau am putea viza direct blocul și axa inline inset-block și inset-inline, respectiv.
În timp ce vorbim de stenografie, îmi place întotdeauna să pun un cuvânt de precauție Resetări CSS „accidentale”.. Doar unul dintre greșelile CSS comune pe care le fac.
