4.CSS Unit of Measure

In CSS length settings, we often need to use the unit of measure, that is, in what units to design our font or border length. In CSS, the length unit is divided into absolute length and relative length.

Absolute length refers to the real-world unit of measurement, and CSS supports five absolute-length units.

Absolute length Unit

Unit identifiers	Description
Inch	Inches
Cm	Cm
Mm	Mm
Pt	Pounds
Pc	Pica

　

Relative length refers to other types of units, but also five kinds.

Relative length Units

Unit identifiers	Description
Em	Hook with element font size
Ex	Hook to the "x-height" of the element font
Rem	Hook to the font size of the root element
Px	Pixels, linked to resolution
%	Percentage relative to another value

Below we use some common units as a demonstration, rather than the basic use of the demo.

1.em relative units

{    margin: 0;      padding: 0;      background: silver;      font-size: 15px;      height: 2em

Explanation: EM is a relative unit, linked to the font size, will change its size depending on the font size, flexibility is high.

2.px relative units, absolute characteristics

{    margin: 0;      padding: 0;     background: silver;     font-size: 15px;      height: 55px

Explanation: Although PX is also a relative unit, due to the resolution hook, he actually becomes an absolute unit, natural flexibility is not high, but the use of low-level, and a large number of developers habitually use it.

3.% percent

{    margin: 0;     padding: 0;     background: silver;     font-size: 200%;      width: 50%

Explanation: A good understanding of length is the width of the block in which it is located. The font-size is the percentage of the original size that is inherited to.

4.CSS Unit of Measure