You may not know the 7 CSS units

Source: Internet
Author: User
Tags lowercase relative vmin

If you are a front-end development engineer, General PX and EM use frequency is relatively high. But today the focus of this article is to introduce some of the units we use very little or even have heard.

One, relive 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 darker the number of layers is, the larger the font.

Second, REM

Although the above use of EM may be used in development, we sometimes want to have a benchmark to expand. When confronted with this requirement, we can use the REM unit, "R" in rem to represent "root", which means that the font size of the current element is set to the root element, and 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 are not only used in fonts, but also in CSS grid systems.

Iii. VH and VW

In a responsive layout, we often use percentages to lay out, but the percentage of CSS does not always solve the best solution for each problem, and the width of the CSS is relative to the width of the parent element closest to it. If you want to use the width and height of the viewport rather than the width of the parent element, you can use the VH and VW units. 1VH = Viewportheight * 1/100; 1VW = Viewportwidth * 1/100; The use of VH, VW can ensure that the elements of the width and height to adapt to different devices.

Iv. Vmin and Vmax

VW and VH correspond to the width and height of viewport, while Vmin and Vmax correspond to the minimum and maximum values in width, height, for example, if the width/height of the browser is set to 1000px/600px,

1vmin = 600 * 1/100;

1vmax = 1000 * 1/100;

Let's take a look at a few examples:

4.1 A square element always touches the edges of at least two screens

<style type= "Text/css" >
. box {
Height:100vmin;
Width:100vmin;
}
</style>
<body>
<div class= "box" style= "Background-color: #f00" >
Fdasjfdlas
</div>
</body>

4.2 Overlay Full Screen

<style type= "Text/css" >
Body {
margin:0;
padding:0;
}
. box {
/* Widescreen display width > height*/
Height:100vmin;
Width:100vmax;
}
</style>

<div class= "box" style= "Background-color: #f00" >
Fdasjfdlas
</div>

V, ex and CH

EX, CH units are similar to EM and rem in that they all depend on font-size, but ex and CH are also dependent on font-family, based on font-specific. Reference to the Consortium specification:

Ex unit Equal to the used x-height of the The ' the ' the ' The '
" [Css3-fonts] The x-height is and so called because it are often equal to the height of the lowercase "x". However, an ' ex ' are defined even for fonts that does not contain an "x". The x-height of a font can is 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 in 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's impossible or impractical to determine the x-height, a value of 0.5em must are assumed.
ch Equal to the Used advance measure of the ' 0 ' (ZERO, u+0030) glyph found in the font used to Rende R it.

Use a diagram to explain the meaning of these two units:

These two units have many uses, most of which are micro-adjustments for printing. For example, the SUP and sub elements display superscript and subscript respectively, but we can use position and bottom simulations:

<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>

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.