Michelle Barker mit meinem Lieblings-Blogbeitrag: kurz, praktisch und hinterlässt Ihnen ein wertvolles Nugget für Ihre Zeit. Hier, Sie beschäftigt sich mit Abkürzungen für logische Eigenschaften in CSS, insbesondere diejenigen, die Längen nur auf einer einzigen Achse festlegen, z. B. nur auf der Blockachse (vertikal) oder nur auf der Inline-Achse (horizontal).
Ich sage „blockieren“ und „inline“, weil sich die x-Achse, was die logischen Eigenschaften betrifft, je nach Strom genauso gut wie eine vertikale Achse verhalten könnte writing-mode.
Also, wo wir immer hatten padding, margin und border Abkürzungen, die eine mehrwertige Syntax unterstützen können, erlaubt uns keine von ihnen, Längen auf einer bestimmten Achse zu deklarieren, ohne auch eine Länge auf der anderen Achse festzulegen.
Beispielsweise:
/* This gives us margin on the inline axis */
margin: 0 3rem;…aber wir mussten die andere Achse einstellen, um dorthin zu gelangen. Bei logischen Eigenschaften haben wir jedoch zusätzliche Abkürzungen für jede Achse, was bedeutet, dass wir die aufrufen können margin-inline Kurzform, um speziell auf der Inline-Achse zu arbeiten:
margin-inline: 3rem;Michelle erwähnt nebenbei meine bevorzugte Kurzschrift für logische Eigenschaften. Wie oft positionieren Sie etwas zu dieser Art von Melodie:
.position-me {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}Wir können diese vier Linien mit einbeziehen inset: 0. Oder wir könnten direkt auf den Block und die Inline-Achse zielen inset-block und inset-inline, Bzw.
Wo wir gerade über Stenogramme sprechen, möchte ich immer ein Wort der Vorsicht anbringen „versehentliche“ CSS-Resets. Nur einer der häufige CSS-Fehler, die ich mache.
