Seven CSS units that you may not know, css units
If you are a front-end development engineer, px and em are usually used frequently. However, the focus of this article today is to introduce some units that we seldom use or even hear about.
I. Review em| 123456789101112131415 | <style type="text/css"> body {font-size: 12px;} div {font-size: 1.5em;}</style><body> <div> Test-01 (12px * 1.5 = 18px) <div> Test-02 (18px * 1.5 = 27px) <div> Test-03 (27px * 1.5 = 41px) </div> </div> </div></body> |
Because font-size is inherited, the deeper the layers, the larger the font.
Ii. remAlthough the above use of em may be used in development, we sometimes want to have a benchmark for expansion. In this case, we can use rem units. In rem, "r" represents "root", which means to set the font size of the current element to the root element. In most cases, we will set it on the html element.
| 123456789101112131415 | <style type="text/css"> html {font-size: 12px;} div {font-size: 1.5rem;}</style><body> <div> Test-01 (12px * 1.5 = 18px) <div> Test-02 (12px * 1.5 = 18px) <div> Test-03 (12px * 1.5 = 18px) </div> </div> </div></body> |
Of course, rem units can be applied not only to fonts, but also to CSS grid systems.
Iii. Ku and vwIn responsive layout, we often use percentages for layout. However, the percentage of CSS is not always the best solution to every problem, the width of CSS relative to the width of the parent element closest to it. If you want to use the width and height of the viewport, instead of the width and height of the parent element, you can use the units of the following. 1vl = viewportHeight * 1/100; 1vw = viewportWidth * 1/100; the element width and height can be ensured to adapt to different devices by using the VL and vw.
Iv. vmin and vmaxVw corresponds to the width and height of viewport, while vmin and vmax correspond to the minimum and maximum values of width and height respectively. For example, if the width/height of the browser is set to 1000px/600px, so
1 vmin = 600*1/100;
1 vmax = 1000*1/100;
Let's take a look at several examples: 4.1 A square element always touches the edges of at least two screens| 1234567891011 | <style type="text/css">.box { height: 100vmin; width : 100vmin;}</style><body> <div class="box" style=" margin: 0px !important; padding: 0px !important; border-top-left-radius: 0px !important; border-top-right-radius: 0px !important; border-bottom-right-radius: 0px !important; border-bottom-left-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.8em !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; min-height: inherit !important; background: none !important;">> fdasjfdlas </div></body> |
| 123456789101112131415 | <style type="text/css"> body { margin: 0; padding:0; } .box { /* Wide screen display width> height */ height: 100vmin; width : 100vmax; }</style> <div class="box" style=" margin: 0px !important; padding: 0px !important; border-top-left-radius: 0px !important; border-top-right-radius: 0px !important; border-bottom-right-radius: 0px !important; border-bottom-left-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.8em !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; min-height: inherit !important; background: none !important;">> fdasjfdlas</div> |
Similar to em and rem, ex and ch depend on font-size, but ex and ch depend on font-family for Computing Based on font-specific. Reference w3C specifications:
ex unit Equal to the used x-height of the first available font. [CSS3-FONTS] The x-height is so called because it is often equal to the height of the lowercase "x". However, an ‘ex’ is defined even for fonts that do not contain an "x". The x-height of a font can be found in different ways. Some fonts contain reliable metrics for the x-height. If reliable font metrics are not available, UAs may determine the x-height from the height of a lowercase glyph. One possible heuristic is to look at how far the glyph for the lowercase "o" extends below the baseline, and subtract that value from the top of its bounding box. In the cases where it is impossible or impractical to determine the x-height, a value of 0.5em must be assumed.
ch unit Equal to the used advance measure of the "0" (ZERO, U+0030) glyph found in the font used to render it.
Use a pair of graphs to explain the meanings of these two units:
These two units have many uses, most of which are used for microadjustment during printing. For example, the sup and sub elements show the superscript and subscript respectively, but we can use position and bottom to simulate:
| 123456789101112131415161718 | <style type="text/css">body { margin: 0; padding:0;} .sup { position: relative; bottom: 1ex;}.sub { position: relative; bottom: -1ex;}</style><div> AaB<span class="sup">b</span>CcXxD<span class="sub">d</span>EeFf</div> |
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
