Deep understanding of the unit of length in CSS, deep understanding of css Length

Deep understanding of the unit of length in CSS, deep understanding of css Length
* Directory [1] px [2] in [3] cm [4] mm [5] q [6] pt [7] pc [8] em [9] rem [10] ex [11] ch [12] ext [13] vw [14] vmin [15] vmax

This article introduces the main knowledge of the unit of length in CSS by dividing it into absolute length units and relative length units.

 

Absolute length unit

The absolute length unit represents a physical measurement.

 

Pixel px (pixels)

On the web, pixel px is a typical measurement unit. Many other length units are directly mapped to pixels. Eventually, they are processed in pixels.

 

Inches in (inches)

1in = 2.54 = 96px

 

Cm (centimeters)

1 CM = 10mm = 96px/2.54 = 37.8px

 

Mm (millimeters)

1mm = 0.1 = 3.78px

 

1/4mm q (quarter-millimeters)

1q = 1/4mm = 0.945px

 

Point pt (points)

1pt = 1/72in = 0.0139in = 1/72*2.54 cm = 1/72 * 96px = 1.33px

 

Card dispatching pc (picas)

1 pc = 12pt = 1/6in = 1/6 * 96px = 16px

 

Unit of relative font Length

Em, ex, ch, and rem are relative font length units.

 

Em

Em indicates the calculated value of the font-size attribute of the element. If it is used for the font-size attribute itself, it is relative to the font-size of the parent element. If it is used for other attributes, it is relative to the font-size of its own element.

<Style>. box {font-size: 20px ;}. in {/* relative to the parent element, SO 2 * 2px = 40px */font-size: 2em;/* relative to its own element, so 5 * 40px = 200px */height: 5em; /* 10 * 40px = 400px */width: 10em; background-color: lightblue;} </style>

<Div class = "box"> <div class = "in"> test text </div>

Rem

Rem is the calculated value relative to the font-size attribute of the root element html.

Compatibility: IE8-not supported

<Style>/* if the default font size of the browser is 16 PX, 2*16 = 32px. Therefore, the font size of the root element is 32px */html {font-size: 2rem ;} /* 2*32 = 64px */. box {font-size: 2rem ;}. in {/* 1*32 = 32px */font-size: 1rem;/* 1*32 = 32px */border-left: 1rem solid black; /* 4*32 = 128px */height: 4rem;/* 6*32 = 192px */width: 6rem; background-color: lightblue;} </style>

<Div class = "box"> <div class = "in" id = "test"> test text </div>

Ex

Ex indicates the height of x in the font used. However, the height of x in different fonts may be different. In fact, many browsers use half of the em value as the ex value.

[Note] ex is often used for fine-tuning in practice.

<style>.box{font-size: 20px;}.in{    font-size: 1ex;    border-left: 1ex solid black;    height: 10ex;    width: 20ex;    background-color: lightblue;}</style>

<Button> </button> <button> arial </button> <button> serif </button> <div class = "box"> <div class = "in" id = "test"> test text </div>

<script>var aBtns = document.getElementsByTagName('button');for(var i = 0; i < aBtns.length; i++ ){    aBtns[i].onclick = function(){        test.style.fontFamily = this.innerHTML;    }}    </script>

Ch

Similar to ex, ch is defined as the width of the number 0. When the number 0 width cannot be determined, take half of the em value as the ch Value

Compatibility: IE8-not supported

[Note] ch is mainly used in Braille layout.

<style>.box{font-size: 20px;}.in{    font-size: 1ch;    border-left: 1ch solid black;    height: 10ch;    width: 20ch;    background-color: lightblue;}</style>

<Button> </button> <button> arial </button> <button> serif </button> <div class = "box"> <div class = "in" id = "test"> test text </div>

<script>var aBtns = document.getElementsByTagName('button');for(var i = 0; i < aBtns.length; i++ ){    aBtns[i].onclick = function(){        test.style.fontFamily = this.innerHTML;    }}    </script>

 

The relative length unit of the view.

The size of the length value related to the viewport relative to the initial inclusion block. When the width and height of the initial contained block change, they all scale accordingly. However, when the overflow value of the root element is auto, any scroll bar assumes that it does not exist.

There are four units related to the view, namely, the following:

Compatibility: IE8-not supported, IOS7.1-not supported, android4.3-not supported (not supported by all IE browsers for vmax)

[Note] BlackBerry mistakenly calculates the value relative to the Visual View. safari strangely calculates the value relative to the html element. if the content is added to the html, the two units also change.

Vl

1/100 of the layout height

Vw

1/100 of the width of the Layout View

<Style> body {margin: 0 ;}. box {/* achieves high screen effects */height: 100vl; background-color: lightblue ;}</style>

<div class="box"></div>

Vmin

Deploy the 1/100 minimum value between the height and width of the view.

/* Similar to the contain effect */. box {height: 100 vmin; width: 100 vmin ;}

Vmax

1/100 of the maximum value between the height and width of the Layout View

/* Similar to cover effect */. box {height: 100 vmax; width: 100 vmax ;}