Everybody knows, CSS has a lot of units.
But the truth is, most people sucks at it.
If you don't want to be one of those, learn them all (in next 3 minutes):
But the truth is, most people sucks at it.
If you don't want to be one of those, learn them all (in next 3 minutes):
There are two types of units in CSS:
> Relative
> Absolute
Relative units are the units that are dependent on other entities.
So, they are not fixed and can change their measurement according to the entity they are dependent up on.
> Relative
> Absolute
Relative units are the units that are dependent on other entities.
So, they are not fixed and can change their measurement according to the entity they are dependent up on.
ch
This unit is pretty handy when you want the size in terms of CHARACTERS.
1ch equals to the height of the digit 0 in whatever font size the element has.
Also, when there is no font size defined, the element inherits it from its parent.
This unit is pretty handy when you want the size in terms of CHARACTERS.
1ch equals to the height of the digit 0 in whatever font size the element has.
Also, when there is no font size defined, the element inherits it from its parent.
vw
It is one of the most commonly used units.
vw is relative to the viewport width.
In other words, 1vw will be 1% of total viewport width.
It is one of the most commonly used units.
vw is relative to the viewport width.
In other words, 1vw will be 1% of total viewport width.
vh
It is a lot similar to the vw unit. The only difference is that, it is relative to viewport height.
So, 1vh will be 1% of the total viewport height.
It is a lot similar to the vw unit. The only difference is that, it is relative to viewport height.
So, 1vh will be 1% of the total viewport height.
vmin
This unit is relative to the smaller viewport dimension.
When the width is smaller than the height, it will behave as vw unit.
When the width is bigger than the viewport height, it will behave as vh unit.
This unit is relative to the smaller viewport dimension.
When the width is smaller than the height, it will behave as vw unit.
When the width is bigger than the viewport height, it will behave as vh unit.
vmax
It is similar to the vmin unit, but instead of smaller dimensions, it takes the larger one.
If height is more that the width, it will behave like vh unit.
When the width is bigger than the viewport height, it will behave as vw unit.
It is similar to the vmin unit, but instead of smaller dimensions, it takes the larger one.
If height is more that the width, it will behave like vh unit.
When the width is bigger than the viewport height, it will behave as vw unit.
%
Percentage is nothing but percentage.
So, 1% will be 1% of the parent width/height (for whichever dimension you're declaring it).
Percentage is nothing but percentage.
So, 1% will be 1% of the parent width/height (for whichever dimension you're declaring it).
em
This unit is relative to the font size of the element.
If the element don't have a font size declared, it inherits it from it's parent container.
This unit is relative to the font size of the element.
If the element don't have a font size declared, it inherits it from it's parent container.
rem
It is the same as em unit but instead of the font size of the element, it takes the root font size.
It is the same as em unit but instead of the font size of the element, it takes the root font size.
ex
It is relative to the height of the letter "x" with the element's font size.
Again, if the font size is not declared for the element, it inherits it from its parent container.
It is relative to the height of the letter "x" with the element's font size.
Again, if the font size is not declared for the element, it inherits it from its parent container.
Now, comes the absolute units.
Absolute units are not dependent on any other entity.
In other words, they are fixed sized.
Below they are:
Absolute units are not dependent on any other entity.
In other words, they are fixed sized.
Below they are:
mm -----------> 1/10 of a centimeter
cm -----------> 1cm
in -----------> 2.54 cm
pc -----------> 1/6 of a inch
pt -----------> 1/72 of a inch
q -----------> 1/40 of a inch
px -----------> 1/96 of a inch
cm -----------> 1cm
in -----------> 2.54 cm
pc -----------> 1/6 of a inch
pt -----------> 1/72 of a inch
q -----------> 1/40 of a inch
px -----------> 1/96 of a inch
That is it. You can check out @Utsav_0 for more.
See you later
See you later
جاري تحميل الاقتراحات...