A brief talk about my understanding of length units in CSS

The length units in the CSS are currently divided into two types, absolute length and relative length respectively. Absolute length Units Include:

• In: inch
• Cm: cm
• mm: mm
• pt: lbs (1 lbs equals 1/72 inches)
• Pc:pica (1pica equals 12 lb)

The above five is defined in the CSS in the absolute length units, they are in our actual life with a lot of, but in the writing of CSS code to be displayed on the screen when the page, this absolute length of the unit to use very little, I can think of more useful places only to print the length of units may be used, Although I have not been contacted. The next is relative length units, relative, as the name implies is a certain length as a reference, set theactual value of relative lengthIt isRelative Length value * Reference value。 The relative units in CSS Include:

• Em: hook with the Element's font size (font-size)
• Ex: hook up with the actual height of the letter "x" in the element font (because the height of x in different fonts is different, it feels like a good casual unit, why not other letters? 0.0)
• Rem: hook with the font size of the root element (the HTML element is the root Element)
• Px:css pixels (assuming The resolution of the display device is 96dpi)
• %: percent of another property value

Because the relative length units used more, so it is necessary to add a demo what, intuitive experience:

1. em

EM is a relative length unit of the reference Element's font size to set its own value, as shown below, I set the P Element's font-size property value to 14px, the height of the P element is set to 4em, and the Line-height is also set to 4em, This allows the content of the P element to have an upper and lower center Effect.

 1  p  {2   background :  gold ; 3   color :  #000000 ; Span style= "color: #008080" >4   font-size :  14PX ; 5   height :  4em ; 6   line-height :                 4em ; 7 } 

1 < P > This is casually written in a sentence </p>

The effect is as Follows:

2. REM (personal Feeling this value is very useful in a responsive layout, not much at the moment, but should be very hot in the Future)

The actual value of this unit =html the value of the element * The relative value of this unit is as Follows:

1 HTML{2 font-size:24px;3}4 P{5 background:Gold;6 Color:#000000;7 font-size:1rem;8 Height:4em;9 Line-height:4em;Ten}

1 < P > This is casually written in a sentence </p>

The effect is as Follows:

3. px

pixel, This unit in the actual development used, seen very Much. While the PX defined in the CSS standard is a relative length unit, because the definition is very wonderful (seems to be related to the Reader's arm length, I guess this should also be a relative kind of bar:)), so many browsers have 1px length is defined as 1 inches of 1/96, about this, so essentially, PX is also an absolute length unit. Because it's so common, it doesn't show up.

4.%

A percentage unit is defined As:you can represent a unit of measure as a percentage of other property values 。 We can find a question from the definition, what is the property of this "other attribute value", for example: the font-size and width of the same element use% as the unit, and the other attribute values they refer to are the same? The reality gives the answer is: not the same!    There are two places to be aware of using the percent symbol as a unit:-not all properties can use percentages as Units. -for elements that can use percentages as units, the "other attribute values" they correspond to are Different. For example, referring to the font-size, the referenced element inherits the resulting font-size value, and for the width property, The reference contains the width of the block of the Element. These are some of my current simple understandings of the length units in Css. If there is a new feeling and understanding, it will be updated continuously.

A brief talk about my understanding of length units in CSS