Michelle Barker suosikki sorta-blogiviestilläni: lyhyt, käytännöllinen ja jättää sinulle arvokkaan kimpun aikaanne. Tässä, hän perehtyy CSS:n loogisiin ominaisuuksiin, erityisesti ne, jotka asettavat pituudet vain yhdelle akselille, sanotaan vain lohko (pysty) akseli tai vain sisäinen (vaaka) akseli.
Sanon "block" ja "inline", koska loogisten ominaisuuksien osalta x-akseli voisi yhtä hyvin käyttäytyä kuin pystyakseli virrasta riippuen. writing-mode.
Eli siellä missä meillä on aina ollut padding, marginja border lyhenteitä, jotka voivat tukea moniarvoista syntaksia, mikään niistä ei salli meidän ilmoittaa pituuksia tietyllä akselilla asettamatta pituutta myös toiselle akselille.
Esimerkiksi:
/* This gives us margin on the inline axis */
margin: 0 3rem;…mutta meidän piti asettaa toinen akseli päästäksemme sinne. Loogisilla ominaisuuksilla meillä on kuitenkin ylimääräisiä lyhenteitä jokaiselle akselille, mikä tarkoittaa, että voimme vihjailla margin-inline lyhenne, joka toimii erityisesti riviakselilla:
margin-inline: 3rem;Michelle mainitsee ohimennen suosikkini loogisen ominaisuuden lyhennelmäni. Kuinka monta kertaa sijoitat jotain tämänkaltaiseen säveleen:
.position-me {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}Voimme saada nämä neljä riviä sisään inset: 0. Tai voisimme kohdistaa lohkon ja rivin akselin suoraan inset-block ja inset-inlineVastaavasti.
Kun puhumme lyhennyksistä, haluan aina esittää varoituksen sanan ”vahingossa” CSS nollautuu. Vain yksi niistä yleisiä CSS-virheitä, joita teen.
