编程知识 cdmana.com

CSS unit

The basic use of units

  • CSS There are several different units for length .
  • Some settings CSS The properties of length are width, margin, padding, font-size, border-width, etc. .
  • Length consists of a number and a unit, such as 10px, 2em, etc. .
  • There should be no spaces between numbers and units . If the length value is 0, The unit can be omitted .
  • For some CSS attribute , The length can be negative .
  • There are two types of units of length : Relative and absolute .

Browser support

The numbers in the table below indicate the minimum browser version that supports this unit of length .

A unit of length Chrome IE Firefox Safari Opera
em, ex, %, px, cm, mm, in, pt, pc 1.0 3.0 1.0 1.0 3.5
ch 27.0 9.0 1.0 7.0 20.0
rem 4.0 9.0 3.6 4.1 11.6
vh, vw 20.0 9.0 19.0 6.0 20.0
vmin 20.0 9.0 19.0 6.0 20.0
vmax 26.0 I won't support it 19.0 I won't support it 20.0

Relative length

The relative length unit specifies the property of one length relative to another . The relative length is more suitable for different devices .

Company describe
em It describes the font size relative to that applied to the current element , So it's also a unit of relative length . The default font size for browsers is 16px, be 2em == 32px;
ex It depends on the small letters x Height
ch Numbers 0 Width
rem rem It's a root em(root em) Abbreviation ,rem When acting on non root elements , Relative to the root element font size ;rem When applied to the root element font size , Relative to its initial font size .
vw viewpoint width, Window width ,1vw= The width of the window 1%
vh viewpoint height, Window Height ,1vh= Window height 1%
vmin vw and vh The smaller one .
vmax vw and vh The bigger one .
%
Tips : rem And em What's the difference ? The difference is in the use of rem Set font size for element , Still relative size , But the opposite is HTML Root element .

Absolute length

The unit of absolute length is a fixed value , It reflects a real physical size . The unit of absolute length depends on the output medium , Not dependent on the environment ( Monitor 、 The resolution of the 、 Operating system, etc ).

Company describe
cm centimeter
mm mm
in Inch (1in = 96px = 2.54cm)
px Pixels (1px = 1/96th of 1in)
pt point, about 1/72 Inch ; (1pt = 1/72in)
pc pica, about 6pt,1/6 Inch ; (1pc = 12 pt)
Pixels may be considered the best " Device pixel ", And this pixel length has nothing to do with the pixels of the text screen you see on the monitor .px It's actually a unit of angular measurement .

版权声明
本文为[Wonfody]所创,转载请带上原文链接,感谢

Tags css unit
Scroll to Top