Detailed description of length units in CSS

Previous Words

This article is divided into absolute length units and relative length units to introduce the main knowledge of length units in CSS

Absolute length Unit

Absolute length units represent a physical measurement

Pixel px (pixels)

On the web, Pixel px is a typical unit of measure, and many other length units map the image directly. Eventually, they are processed in pixels

inch in (inches)

1in = 2.54cm = 96px

CM cm (centimeters)

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

mm mm (millimeters)

1mm = 0.1cm = 3.78px

1/4 mm Q (quarter-millimeters)

1q = 1/4mm = 0.945px

Point pt (points)

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

Picas PC (PICAS)

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

font-related relative length units

EM, ex, CH, rem are font-related relative length units

Em

EM represents the computed value of the element's Font-size property, if used for the Font-size property itself, relative to the parent element's font-size, and if used for other properties, relative to the font-size of the element itself

<style>  . box{font-size:20px;}  . in{/      * Relative to the parent element, so 2*2px=40px */    font-size:2em;      /* Relative to the element itself, so 5*40px=200px */    height:5em;      /* 10*40px=400px */    width:10em;      Background-color:lightblue;  }  </style>

<p class= "box" >    <p class= "in" > Test text </p></p>

Rem

REM is the computed value of the Font-size property relative to the root element html

Compatibility: ie8-not supported

<style>/  * Browser default font size is 16px, then 2*16=32px, so the root element font size 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>

<p class= "box" >    <p class= "in" id= "Test" > Test text </p></p>

Ex

Ex refers to the height of the small write x in the font used. However, the height of the different font x may be different. In fact, many browsers take the EM value half as the ex value

[Note that]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> Arial </button><button> Microsoft ya Black </button><button>arial</button><button >serif</button><p class= "box" >    <p class= "in" id= "Test" > Test text </p></p>

<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

CH is similar to EX and is defined as the width of the number 0. When the width of the number 0 cannot be determined, take half of the EM value as the CH value

Compatibility: ie8-not supported

[Note that]ch is mainly used in Braille typesetting in practice.]

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

<button> Arial </button><button> Microsoft ya Black </button><button>arial</button><button >serif</button><p class= "box" >    <p class= "in" id= "Test" > Test text </p></p>

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

Viewport relative length units

The length value relative to the viewport is relative to the size of the initial containing block. When the initial inclusion blocks vary in width and height, they are scaled accordingly. However, when the overflow value of the root element is auto, any scroll bar assumes that it does not exist.

The units associated with the viewport are VH, VW, Vmin, vmax4 units

Compatibility: ie8-not supported, ios7.1-not supported, android4.3-not supported (for Vmax, all IE browsers are not supported)

[note] The BlackBerry incorrectly calculates it relative to the visual viewport, and Safari is strangely calculated relative to the HTML element, and the two units will change if the content is added to the HTML.

Vh

1/100 of the layout viewport height

vw

1/100 of the layout viewport width

<style>  body{margin:0;}  . box{      /* Achieve with screen and other high effect */    HEIGHT:100VH;      Background-color:lightblue;  }      </style>

<p class= "box" ></p>

Vmin

1/100 of the minimum value between the layout viewport height and width

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

Vmax

1/100 of the maximum value between the layout viewport height and width

/* Similar to cover effect */.box{      Height:100vmax;      Width:100vmax;  }