Méretegységek css-ben, órák, webreferencia
Számos olyan CSS tulajdonság van, amely méretegységet igényel:
- betűméret határozza meg a szöveg méretét;
- a határ szélessége meghatározza az elemek határainak vastagságát;
- margin határozza meg az elemek közötti teret;
- bal / jobb / felső / alsó elemek lehetővé teszik az elemek helyzetét és mozgatását.
A leggyakrabban használt egységek:
- px a képpontokhoz;
- % a kamat;
- em a szülő betűméret-értékhez viszonyított méretének meghatározásához.
Mivel a számítógépes képernyők képpontokat használnak a tartalom megjelenítéséhez, ez a leggyakoribb méretegység a CSS-ben.
Egy pixel használatával határozható meg szélesség egy elem számára:
Vagy állítsa be a szöveg méretét:
A képpontok CSS-ben egyszerűek, mert abszolút értékeket határoztak meg, és nem függenek más öröklődő CSS-tulajdonságoktól.
Széles körben használják a helymeghatározást és a távolságot is.
A százalékos értékek relatív egységek. az elem szülőjére és / vagy őseire támaszkodnak.
Például blokkelemek, például bekezdések, természetesen foglalják el az összes rendelkezésre álló szélességet. A következő CSS szabály a méretét a rendelkezésre álló szélesség felére változtatja.
Az érdeklődés segíthet más CSS-tulajdonságok, például a szöveg méretének beállításában.
em egy relatív egység, és az elem betűméretétől függ.
Ha például a betűtípus-méretű szülő 20px-re van állítva, és betűméretet alkalmaz: 0.8em a gyermek elemre, akkor ez a gyermek elem 16px betűméretet jelenít meg.
Ne keverje össze az em méretét a választóval. amely az elemre irányul .
Az egység em érdekes a HTML elemek betűméretének meghatározásához képest. A vonzó és kényelmes weboldalak létrehozásához vizuális mélységet kell biztosítania. Például, szeretné a saját
kétszer akkora volt, mint a fő szöveg 1,5-szer több, és az oldalsó panel kissé kisebb. Ez könnyen elérhető a CSS-ben:
Ha úgy dönt, megváltoztatja a szöveg méretét
. a fejlécek és az oldalsáv relatív mérete ennek megfelelően változik, és a weboldal vizuálisan kiegyensúlyozott marad.Csak egy érték megváltoztatása megváltoztatja az összes többi értéket:
A rem egység hasonló az emhez, de a szülőértéktől függően a gyökérelem értékére támaszkodik. amely egy elem .
A rem és em közötti különbség az, hogy a rem értéke fix, míg az em értékei egymással szorozódnak.
Ha html-t telepítettél
- A 2rem mindig 36px lesz, tekintet nélkül arra, hogy hol használja a CSS-t;
- A 2em mindig megegyezik a szülő betűméretének kétszereseivel, ami nem feltétlenül egyenlő 36px-vel.
Egy gyors példa, ahol a 2em eltér a 2rem-től:
a betűméret-értékre támaszkodik <р>. míg a betűméret-értékre támaszkodik .
Milyen egységet kell használni?
Azt javasolnám, hogy kezdődjön képpontokkal. mivel ez abszolút érték, nem függnek az elem kontextusától. A képpontok egyszerűek, beállíthatja a szöveg méretét, a kép szélességét és magasságát, a határ vastagságát, pozíció koordinátáit stb.
A százalékos értékek és az em értékek használhatók a képpontokkal együtt, különösen a relatív szövegméreteknél.