Shulou(Shulou.com)06/01 Report--

This article mainly introduces "what is the concept of dimension unit in CSS". In daily operation, I believe that many people have doubts about the concept of dimension unit in CSS. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "what is the concept of dimension unit in CSS?" Next, please follow the editor to study!

Absolute unit

Px: Pixel pixel

Pt: Points pounds

Pc: Picas Paika

In: Inches inch

Mm: Millimeter mm

Cm: Centimeter cm

Q: Quarter millimeters 1max 4mm

Relative unit

%:%

Em: Element meter calculates dimensions based on document fonts

Rem: Root element meter calculates dimensions based on the root document (body/html) font

Ex: the height of the document character "x"

Ch: the width of the document number "0"

Vh: View height visual range height

Vw: View width visual range width

Vmin: the smaller size of the width or height of the visual range of the View min

Vmax: the larger size of the width or height of the visual range of the View max

Operation

Calc: four operations

Example:

H2 {width: calc (100%-10px + 2rem)

Unit ratio

1in = 2.54cm = 25.4mm = 101.6q = 72pt = 6pc = 96px

Detailed

Absolute unit

Px-Pixel pixel

Pixel px is relative to the screen resolution of the device display.

Div {font-size: 12px} p {text-indent: 24px}

Pt Points lb

1 pt = 1 beat 72 inches

Div {font-size: 10pt} p {height: 100pt}

Pc Picas Paika

Twelve-point movable type (used in printing) is equivalent to the size of the new No. 4 lead type in China.

Div {font-size: 10pc} p {height: 10pc}

In Inches in.

Div {font-size: 10in} p {height: 10in}

Mm Millimeter mm

Div {font-size: 10mm} p {height: 10mm}

Cm Centimeter cm

Div {font-size: 10cm} p {height: 10cm}

Q Quarter millimeters 1x 4mm

Div {font-size: 20q} p {height: 100q}

Relative unit

%%

Relative to the width of the parent element

Em Element meter calculates dimensions based on the document

Relative to the font size of the text in the current document object, if the font size is not specified, it is inherited from the parent element, and so on, until body, or the browser default size if body is not specified.

Rem Root element meter calculates dimensions based on the root document (body/html) font

Relative to the font size of the text within the root document object (body/html), if no font size is specified, it inherits to the browser default font size.

At this point, the study of "what are the concepts of dimension units in CSS" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.