Michelle Barker kedvenc sorta blogbejegyzésemmel: rövid, praktikus, és értékes rögöt hagy az idejére. Itt, belekerül a logikai tulajdonságok rövidítésébe a CSS-ben, különösen azok, amelyek csak egyetlen tengelyen állítják be a hosszúságot, mondjuk csak a blokk (függőleges) tengelyt vagy csak a beépített (vízszintes) tengelyt.
„Block” és „inline” azért mondom, mert ami a logikai tulajdonságokat illeti, az x tengely az áramerősségtől függően akár függőleges tengelyként is viselkedhet. writing-mode.
Szóval, ahol mindig is volt padding, marginés border A többértékű szintaxist támogató gyorsírások egyike sem teszi lehetővé, hogy egy adott tengelyen hosszokat deklaráljunk anélkül, hogy a másik tengelyen is beállítanánk a hosszt.
Például:
/* This gives us margin on the inline axis */
margin: 0 3rem;…de be kellett állítani a másik tengelyt, hogy odaérjünk. A logikai tulajdonságokkal azonban minden tengelyhez további rövidítések is vannak, ami azt jelenti, hogy előírhatjuk a margin-inline gyorsírás kifejezetten a belső tengelyen történő munkához:
margin-inline: 3rem;Michelle mellékesen megemlíti kedvenc logikai tulajdonságomat. Hányszor pozicionál valamit ehhez a dallamhoz:
.position-me {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}Ezt a négy sort be tudjuk illeszteni inset: 0. Vagy megcélozhatjuk közvetlenül a blokkot és a soros tengelyt inset-block és a inset-inline, Ill.
Miközben rövidítésekről beszélünk, mindig szeretek egy szót figyelmeztetni „véletlen” CSS-visszaállítások. Csak az egyik az általam elkövetett gyakori CSS hibák.
