Egységek
Sok CSS tulajdonságok tetszik width, margin, padding, font-sizestb, hogy hosszú. A CSS-nek módja van a hosszúságot több egységben kifejezni. A hossz egy szám és egység kombinációja, szóköz nélkül. Pl 5px. 0.9emStb.
Hossz
Közös hosszegységek
Számos egységet használ a CSS a hosszúság kifejezésére. A régebbi, amelyet minden böngésző támogat, a következők:
- rem - „r” jelentése „root”: „root em” -, amely megegyezik a gyökérelemhez rögzített betűmérettel (szinte mindig
). - vh és vw - Számos adaptív web-tervezési technika nagymértékben támaszkodik a százalékos szabályokra. A CSS százalékos mutatói azonban nem mindig jelentik a legjobb megoldást minden problémára. A vh mértékmegegyezik a nézetablak magasságának 1/100 részével. Tehát például, ha a böngésző magassága 800 képpont, akkor az 1 óra értéke 8 képpont, és hasonlóan, ha a nézet szélessége 650 képpont, akkor az 1 térfogat 6,5 képpont.
- vmin és vmax - Ezek az egységek a vh és vw maximális vagy minimális értékéhez kapcsolódnak. Például, ha a böngésző beállítása 1200 képpont széles és a kép magassága 600 képpont, akkor az 1 perc 6 képpont, az 1 kép pedig 12 képpont. Ha azonban a szélességet 700 képpontra, a magasságot pedig 1080 képpontra állítják, akkor a vmin értéke 7 képpont, a vmax értéke pedig 10,8 képpont.
- ex és ch - Ezek az egységek az em és a remhez hasonlóanaz aktuális betűtípustól és betűmérettől függenek. Az em és rem-től eltérően azonbanezek az egységek is támaszkodnak,
font-familymivel az egyes betűtípusokra jellemző intézkedések alapján határozzák meg őket. A ch egység („karakteregység”) a nulla karakter szélessége („0”). Az ex egységet az „aktuális betűkészlet aktuális x-magassága vagy 1em fele” határozza meg. Egy adott betűkészlet x magassága az adott betű kisbetűjének „x” magassága. Gyakran a betűtípus középső jele.
A CSS-ben két általános egység van a hosszra és a méretre: relatív és abszolút.
Relatív egységek
A relatív egységek változnak az elem aktuális betűméretéhez vagy más beállításokhoz képest. Néhány relatív egység az
em
- az
font-sizeaktuális elem M nagybetűjének szélessége . - A betűméretek a szülői elemektől származnak.
Példa:
div { font-size: 16px; } div h3 { font-size: 2rem; }Itt a
egyenlő lesz, 32pxmivel az font-sizeaktuális vagy a szülő elem értéke 16px.
rem
- gyökér
em, vagy az alapértelmezett alap M nagybetűjének szélességefont-size. - A szülő betűméreteinek nincs hatása.
Példa:
body { font-size: 16px; } p { font-size: 1.5rem; }Itt a
egyenlő lesz 24px, mivel az alapértelmezett bázis font-sizevan 16px.
%
- százalékos méret a szülő méretéhez viszonyítva.
Példa:
div { width: 400px; } div p { width: 75%; }Mivel a szülő szélessége az 400px, a belső grafikon szélessége 300px, vagyis annak 75% -a lenne 400px.
vw
- nézetszélesség, vagy a nézetablak szélességének 1/100 része
Példa:
body { width: 100vw; }A bodykitöltés szélessége a nézetablak, hogy ez-e 417px, 690px, vagy bármilyen szélességben.
vh
- nézetmagasság, vagy a nézetablak magasságának 1/100 része
Példa:
div { height: 50vh; }Ez divkitölti a nézetablak magasságának felét, legyen az 1080px, 1300px vagy bármilyen magasság.
Abszolút egységek
Az abszolút mértékegységek a képernyő méretétől és egyéb beállításoktól függetlenül azonosak lesznek. Néhány abszolút egység az
px
- pixel
- A képpontok száma a megtekintő eszköz képernyőjének minőségéhez viszonyítva
in, cm,mm
- hüvelyk, centiméter, milliméter
- A hüvelyk egy hüvelyk egy kis képernyőn vagy egy nagy képernyőn
pt, pc
- pont (1/72 hüvelyk) és picas (12 pont)
Példa
p { font-size: 24px; } div { width: 3in; border-width: 3pt; }A (z) bekezdés font-size: 24px24px-ként jelenik meg egy telefon, táblagép vagy asztali képernyőn.
A divfog megjelenni, mint 3 inch széles és a borderaz divlesz 3/72 hüvelyk vastag, függetlenül a képernyő mérete.