CSS3 mértékegységek

Számos CSS tulajdonságnál (width,  margin , border , padding , stb…) lehet (hossz)méretet megadni. Egy méret egy értékből (value) és egy mértékegységből (unit) áll.

Az érték és a mértékegység egybe írandó, tehát nem lehet közöttük szóköz, ennek az az oka, hogy sok tulajdonságnál van lehetőség egyszerre több méretet megadni, amelyeket szóközzel választunk el. (pl.: margin: 20px 10px 30px 10px; )

Néhány CCS tulajdonság esetében negatív érték is megengedett.

A CSS-ben többféle mértékegység áll rendelkezésre a méretek megadására, amelyek lehetnek abszolút vagy relatív egységek.

Abszolút mértékegységek

  • px, pixels (1px = 1/96th of 1in)
  • pt, points (1pt = 1/72 of 1in)
  • in, inches (1in = 96px = 2.54cm)
  • pc, picas (1pc = 12 pt)
  • mm, millimeters
  • cm, centimeters

A leggyakrabban használt abszolút mértékegység a pixel.

Relatív mértékegységek

A relatív vagyis viszonylagos mértékegységek mindig egy másik másik elem méretéhez képest értelmezendőek. Néhány ilyen:

  • em: az adott elem betűméretéhez viszonyított méret (tehát a 2em azt jelenti, hogy valami legyen kétszer akkora, mint az adott elem betűmérete)
  • %
  • vw: a böngészőablak (viewport) szélességének 1%-ához viszonyított méret
  • vh: a böngészőablak (viewport) magasságának 1%-ához viszonyított méret
  • vmin: a böngészőablak (viewport) kisebb oldalának 1%-ához viszonyított méret
  • vmax: a böngészőablak (viewport) hosszabb oldalának 1%-ához viszonyított méret

Forrás és további infó: http://www.w3schools.com/cssref/css_units.asp

Leave a Reply

Your email address will not be published. Required fields are marked *