Shulou(Shulou.com)06/02 Report--

What are the 7 CSS units that you may not know? for this question, this article introduces the corresponding analysis and solutions in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible way.

It is well known that although we are familiar with CSS technology, it is easy to get stuck in the process of using it, which makes us very disadvantageous when new problems arise.

As web continues to evolve, the demand for new technologies and new solutions will continue to grow. Therefore, as web designers and front-end developers, we have no choice but to be familiar with the tools we have and know ourselves and enemies so that we can be invincible.

This means that there are some special goods that are not usually used, but once they are needed somewhere, they really don't fit in.

Today, I'm going to introduce you to some of the CSS guys you may have rarely seen before. Each of them is a unit of measurement, like pixel and em, but there's a good chance you've never heard of these guys before! Let's make friends together.

Rem

First of all, let's introduce the goods that are very similar to the ones we are familiar with. Em is defined as the font size relative to the text within the current object. Stir-fry a chestnut, if you set the font-size font size for body, then the 1em of any child element of body is equal to the font-size set by body.

Test

Body {font-size: 14px;} div {font-size: 1.2em; / / calculated at 14px * 1.2, or 16.8px}

You see, here the font size of div is 1.2em. To explain it, it's 1. 2 times the font size he inherited from body's father (in this case, 14px), and the result is 16.8px.

But what happens if you use em cascading layer by layer to define the font size of nested elements? In the following short piece of code, we apply the same CSS as above, and each div inherits the font size from its parent element, and gradually increases it.

Test

Although this is exactly what we want in some places, we usually want to rely on a single relative unit of measurement. At this point, we can use rem. 'r'is an abbreviation for "root", meaning that 1rem is equal to the font size of the root element; in most cases, the root element is the element.

Html {font-size: 14px;} div {font-size: 1.2remt;}

So the font size of the three nested div kids above is 1.2*14px = 16.8px.

Suitable for grid layout

Rems is more than just convenient for setting font sizes. To stir-fry chestnuts, you can use rem based on the font size of the html root element as the size unit of the entire grid layout or UI library, and then use em units in other specific places. This will bring you more font size and scalability.

.container {width: 70remt; / / 70 * 14px = 980px}

Conceptually, the idea of this approach is to have your interface scale according to your content. However, this does not make sense in all cases.

Vh and vw

Responsive web design is inseparable from percentage. However, the CSS percentage is not the solution to all problems. The width of the CSS is relative to the width of the nearest parent element that contains it. But what if you just want to use the width or height of the viewpoint instead of the parent element? This is what vh and vw units provide for us.

1vh is equal to the viewport height of 1Accord 100. Chestnut: browser height 900px, 1 vh = 900px/100 = 9 px. Similarly, if the viewport width is less than 750, 1vw = 750px/100 = 7.5 px.

As you can imagine, they have many uses. For example, we use a very simple method to implement a box as high as the screen with only one line of CSS code.

.duration {height: 100vh;}

Suppose you want a title with the same width as the screen, you only need to set the font-size unit of the title to vm, and the font size of the title will automatically be scaled according to the width of the browser to achieve the effect of synchronizing the font and viewport size.

Vmin and vmax

Vh and vm are based on the height and width of the viewport, whereas vmin and vmax are the minimum or * * values for both the height and width of the viewport. For example, the width of the browser is set to 1100px, the height is set to 700px, 1vmin = 1px, 1vmax = 11px. If the width is set to 800px and the height is set to 1080px, 1vmin equals 8px, and 1vmax does not 10.8px.

So the question is, in what scenario should we use these two units?

Suppose there is an element that you need to keep visible on the screen all the time. You can do this by using vmin units for its height and width and assigning it a value less than 100. With a chestnut, you can define a square with at least two sides touching the screen:

.box {height: 100vmin; width: 100vmin;}

If you want this square box to always cover the visible area of the entire viewport (the four sides always touch the four sides of the screen)

.box {height: 100vmax; width: 100vmax;}

The combination of these units can provide us with a novel and interesting way to flexibly use the size of our viewports.

Ex and ch

Ex and ch units, similar to em and rem, depend on the current font and font size. However, the difference is that these two products are font-based units of measurement, depending on the set font.

Ch units are usually defined as the width of the number 0. You can find some interesting discussions about it on Eric Meyers's blog, such as setting the width of the letter "N" in an equal width font to 40ch, but it can contain 40 letters in another type of font. The traditional use of this unit is mainly for the typesetting of Braille, but in addition, there must be places where it can be used.

Ex is defined as the height of the lowercase x letter of the current font or the 1em of 1 stroke 2. In many cases, it is the middle mark of the font.

Xmuright; the height of the lower case x

These units have many uses, most of which are used for fine-tuning the layout. For example, the sup element (the text mark in the upper corner) can be implemented through position:relative;bottom: 1ex;. In a similar way, you can implement a lower-corner text label. The default way for browsers is to use the

Superscripts and subscripts have specific vertical alignment rules, but if you want finer-grained and more precise control, you can do something like this:

Sup {position: relative; bottom: 1exe;} sub {position: relative; bottom:-1exe;} the answers to the questions about what the seven CSS units you may not know are shared here. I hope the above content can be of some help to everyone. If you still have a lot of doubts to be solved, you can follow the industry information channel for more related knowledge.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.