Original: You may not notice the CSS unit
The Chase
The units in CSS we often use px
,, pt
, em
百分比
, PX and PT do not have to say more
Em
EM is the relative unit, the reference is the parent element font-size
, has the inheritance characteristic
If the font size is 16px (the browser's default value), then1em = 16px
The use of conversion is very complex, especially with PX corresponding, we summed up the experience
Body {
font-size:62.5%;
}
And then 1em = 10px
in the layout and so on when the use of good conversion of a lot
Percentage
Percentages are also very common usage, seemingly simple in fact some beginners may not notice the knowledge
Relative to WHO
The first thing to be clear is the percentage is relative to who, broadly speaking is the parent element, but not very accurate
- For the common positioning element is the parent element that we understand
- For
position: absolute;
the element that is relative to the anchored parent element (offset parent)
- For
position: fixed;
the element is relative to ViewPort
Viewport: Visual window, that is, the window of the browser is so large
Accident
- Padding, margin If you set a percentage, you will find the same percentage of the width of the parent element as expected, but with the width of the * * percentage instead of the imaginary height.
- Descendant elements inherit a percentage- calculated value instead of the original percentage, which
line-height
often encounters pits, as well as a question asking you line-height
to set the 120%
1.2
difference between
CSS3 opens New Age REM
EM is a good unit, but one problem is that it can be confusing because EM relies on the font size of the parent element, and the font size of the parent element of each element is not necessarily the same, resulting in large uncertainties on the layout
rem
Font size of the root element
rem relative html
to the root element (Web page), so it's a lot safer to use.
HTML {font-size:62.5%;/10÷16x100% = 62.5%/}
body {font-size:1.4rem;/1.4x10px = 14px /}
h1 {Font-size:2.4rem;/2.4x10px = 24px/}
ie9+ and modern browsers are already supported.
VW and VH
vw
Viewport width, * * 1VW * * equals viewport width of 1%
vh
Viewport height, * * 1VH * * equals viewport high of 1%
VW and VH will change automatically with viewport changes, no longer have JS control full screen god Horse
Even some people with a lunatic font size are controlled by VW and VH to achieve the effect of font and viewport size synchronization
Both ie10+ and modern browsers support these two units
Vmin and Vmax
These two units are for both VW and VH
vmin
Values in VW and VH compared to small * * *
vmax
Values in VW and VH compared to * * BIG * *
These two properties also change with viewport
Both ie10+ and modern browsers have supported Vmin
WebKit Browser does not support Vmax before, it is now supported, all modern browsers have been supported, but IE * * * * * does not support Vmax
CH and EX
These two units are based on font-family
the relative units of the current * * *
ch
0
the width of the character
ex
x
height of lowercase characters
The font-family
values of these two units change when they change, and the styles of different fonts behave differently.
ie9+ and modern browsers are already supported
Browser compatibility
Write the time introduced some, the great God wrote the test page can help us to see intuitively
Http://s.codepen.io/chriscoyier/fullgrid/CiwFD?type=embed&safe=true
Reference
7 CSS Units might not Know about
Length units for CSS
7 CSS units you may not know
You might not notice. CSS Units