Home > Developer > JavaScript
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<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.
<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<Style type = "text/css">. box {height: 100 vmin; width: 100 vmin ;} </style> <body> <div class = "box"> <style type = "text/css"> body {margin: 0; padding: 0 ;}. box {/* wide screen display width> height */height: 100 vmin; width: 100 vmax ;}</style> <div class = "box"> ex unitEqual 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,'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 case 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:
<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>6. Reference Links
CSS Values and Units Module Level 3
What is the value of the css 'ex' unit?
Defining 'ch'
A Rundown of CSS3 Units and their uses (Support)
7 CSS Units You Might Not Know About
Reprinted statement:
Title: Seven CSS units you may not know.
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
