Common length units in CSS

Original address: 1190000008934791?utm_source=tuicool&utm_medium=referral

PX-pixels

PX is the most commonly used in CSS length units, can be used to specify the font size, the width of the element, height, border, padding, margin size and so on, it is a virtual length unit, is the digital image length unit of the computer system, if PX to be converted to physical length, you need to specify the accuracy DPI

The value of the PX unit must be an integer value

Some of the units related to PX

In-represents an inch, is a physical unit that is directly mapped to PX in CSS; The method of conversion is1in = 96px

CM-represents centimeters, the units commonly used in life, are also mapped to PX; The conversion method is1cm = 37.8px

MM-represents millimeters, similar to cm, with a conversion method of1mm = 0.1cm = 3.78px

EM vs REM

The value of the EM unit equals the font size of the base element or parent element.

For example, if the parent element has a font size of 16px, the 1em value in all immediate child elements is calculated as 16px. Based on the basic unit knowledge, it is convenient to increase or decrease the font size of the kid element. The value here does not need to be an integer.

Using EM makes it easy to keep the font size of various elements at a fixed scale.

For example, if the parent element's font-size value is 50px, the child element's font size is set to 2EM, which is equivalent to 100px. Similarly, setting it to 0.5em causes the child element's font size to be 25px.

It is also important to note that if you want to set the size value of the current element by EM and not relative to the immediate parent element, but rather to the parent element or root element of the parent element, it becomes complex because each layer is evaluated

For example:

<Divclass= "Parent">    <Divclass= "Child1">        <Divclass= "Child2"></Div>    </Div></Div>. Parent {font-size:20px;}. child1 {font-size:1.5em;}. child2 {font-size:1.2em;}

Then it needs to be calculated: Child1 font Size 20 x 1.5 = 30px , and child2 font size is equal to20 x 1.5 x 1.2 = 36px

REM is also a relative unit, and the difference between EM is that the length of REM is always relative to the root element, rather than using a cascade method like em to calculate dimensions. This unit is much simpler to use.

This is also the example above, but the unit used is REM

<div class= "parent" >    <div class= "Child1" >        <div class= "child2" ></div>    {    font-size: 20px;}  {    font-size: 1.5rem;}  {    font-size: 1.2rem;}

Then it needs to be calculated: Child1 font size is 16 x 1.5 = 24px , and child2 font size is equal 16 x 1.2 = 19.2px ; Why is this using 16来 instead of 20? This is because the length of REM is always relative to the root element, which means HTML, and the default font size in the HTML document is 16px, so this is calculated using 16来

Visible area relative length units

The relative length of the viewable area is based on the width and height of the view window or viewport (the viewable area or frame on the screen).

Visual area height units (VH) and visual area width units (VW)

The VH units are related to the height of the viewable area. The value of VH equals 1/100 of the visible area height. This unit is useful if we want to adjust the elements according to the height of the browser window. For example, if the height of the viewable area is 400px, then 1VH is equal to 4px. If the viewable area height is 800px, 1VH is equal to 8px.

Similarly, the VW unit is related to the width of the viewable area. Therefore, the value of 1VW can be calculated. 1VW is equal to 1/100 of the viewable area width. For example, if the width of the window is 1200px, then 1VW will be 12px.

Vmin and Vmax

Vmin is a smaller value in the current VM and VH, that is, a length of 1/100 on the smaller side of the viewable area, for example: the visible area size is 1000x800, wmin = 800/100 = 8px; If the viewable area size is 600x800, then wmin = 600/100 = 6px;

Similarly, Wmax is a larger value in the current VM and VH, that is, 1/100 of the length of the larger side of the viewable area, for example: the visible area size is 1000x800, wmin = 1000/100 = 10px; If the viewable area size is 600x800, then wmin = 800/100 = 8px;

The length expressed as a percentage

The length value in percent is based on the length value of the parent element that has the same property. So it changes as the length of the parent element is worth the change. For example: Set the width of the parent element to 100px and set the direct child element width to 50%, then the width of the child element is 50px;

Common length units in CSS