Seven CSS units that you may not know, css units
Seven CSS units you may not know
As we all know, although we are very familiar with CSS technology, it is easy to get stuck in the Process of use, which makes it very unfavorable when new problems arise. As the web continues to develop, the requirements for new technologies and solutions will also grow. Therefore, as a web designer and front-end developer, we have no choice but to be familiar with the tools we have in hand and be knowledgeable about ourselves and ourselves.
This means that there are some special products, although they are usually not used very often, but once they are needed somewhere, they are really appropriate.
Today, I am going to introduce some of you who have never seen CSS before. Each of them is a measurement unit, similar to pixel and em, but it is very likely that you have never heard of these guys before! Let's make a friend together ~
Rem
First, we will introduce similar products that we are familiar. Em is defined as the font size relative to the text in the current object. If you set the font-size font size for the body, the 1em of any child element of the body is equal to the font-size set for the body.
1 2 3 |
<Body> <Div class = "test"> Test </div> </Body> |
1 2 3 4 5 6 |
Body { Font-size: 14px; } Div { Font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px } |
You can see that the font size of div is 1.2em. It means that the font size (14px here) He inherited from the body Daddy is 1.2 times, and the result is 16.8px.
However, what if you use em to horizontally define the font size of nested elements? In the following code, we apply the same CSS as above. Each div inherits the font size from its parent element at the upper level and gradually increases.
1 2 3 4 5 6 7 8 9 10 11 |
<Body> <Div> Test <! -- 14*1.2 = 16.8px --> <Div> Test <! -- 16.8*1.2 = percentile 16px --> <Div> Test <! -- 20.16*1.2 = 24.192px --> </Div> </Div> </Div> </Body> |
Instance
Although this is what we want in some places, we usually want to rely on a single relative measurement unit. At this time, we can use rem. 'R' is short for "root", which means 1rem is equal to the font size of the root element. In most cases, the root element is the
1 2 3 4 5 6 |
<Span id = "0_nwp"> id = 1 & sid = 660bad4ec79e407 & ssp2 = 1 & stid = 9 & t = tpclicked3_hc & td = 1922429 & tu = u1922429 & u = http % 3A % 2F % 2 Fwww % 2Eadmin10000% 2 Ecom % 2 Fdocument % 2F5463% 2 Ehtml & urlid = 0 "target =" _ blank "mpid =" 0" Style = "text-decoration: none;"> <span> font-size: 14px; } Div { Font-size: 1.2rem; } |
In this way, the font size of the three nested div dolls above is 1.2 * 14px = 16.8px.
Applicable to grid layout
Rems is not only convenient for setting the font size. Then, you can use rem Based on the font size of the html root element as the layout of the entire grid or the size unit of the UI library, and then use em units in other specific places. This will give you more control over the font size and scaling,
1 2 3 |
. Container { Width: 70rem; // 70 * 14px = 980px } |
In terms of concept, the idea of this method is to scale your interface according to your content. However, this does not make sense in all situations.
VL and vw
The percentage of responsive web design is indispensable. However, CSS percentage is not the best solution to all problems. The CSS width is relative to the width of the nearest parent element containing it. But if you want to use the width or height of the viewpoint instead of the parent element, should you do it? This is what we provide for the units of the two.
The height of a 1 Gbit/s or 1/100 Gbit/s view. Chestnut: the browser height is 900px, and the value is 1 * H = 900px/100 = 9 px. Similarly, 1 vw = 750px/750 = 100 px if the port width is not 7.5.
As you can imagine, they have many purposes. For example, we can use only one line of CSS code to implement boxes with the same screen height.
. Slide {
Height: 100h_h;
}
Suppose you want a title with the same width as the screen. If you set the font-size unit of the title to vm, the font size of the title will be automatically scaled according to the browser width, in order to achieve the font and viewport size synchronization effect, is there wood ?!
Instance
Vmin and vmax
Based on the height and width of the viewport, The VL and vm correspond to the minimum or maximum values of the vmin and vmax values of the two. For example, the browser width is set to 1100px, the height is set to 700px, 1 vmin = 1px, and 1 vmax = 11px. If the width is set to 800px, the height is set to 1080px, 1vmin is equal to 8px, and 1vmax is not 10.8px.
So the question is, in what scenarios should we use these two units?
Suppose there is an element, you need to make it always visible on the screen. You only need to use the vmin unit for its height and width, and assign it a value lower than 100. Another example is to define a square with at least two sides touching the screen:
1 2 3 4 |
. Box { Height: 100 vmin; Width: 100 vmin; } |
If you want to make the square box always overlay the visible area of the entire view (the four sides are always touched to the four sides of the screen)
1 2 3 4 |
. Box { Height: 100 vmax; Width: 100 vmax; } |
Using these units together can provide us with a novel and interesting way to flexibly utilize the size of our views.
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 based on the font measurement unit and depend on the Set Font.
The unit of ch is usually defined as the width of the number 0. You can find some interesting discussions about it in Eric Meyers's blog. For example, you can set the width of the letter "N" in an equal-width font to 40ch, in another type of font, it can contain 40 letters. The traditional use of this unit is mainly for the layout of Braille, but there must be other places where it can be applied.
Ex is defined as the lowercase x letter height of the current font or 1em of 1/2. Most of the time, it is the middle sign of the font.
X-height; the height of the lower case x
These units have many purposes, most of which are used for fine-tuning the layout. For example, the sup element can be implemented through position: relative; bottom: 1ex. In a similar way, You can implement a plain text mark. By default, the browser uses the vertical alignment rules of superscripts and subscripts. However, if you want more fine-grained control, you can do the following:
1 2 3 4 5 6 7 8 |
Sup { Position: relative; Bottom: 1ex; } Sub { Position: relative; Bottom:-1ex; } |
Conclusion
Continuous attention to the ever-growing CSS technology is undoubtedly very important, so that you can master all the skills of your tools. Maybe you will need to use these complicated units to solve a special problem in the future. Take some time to read new technical specifications and register and subscribe to some good websites or resources, such as cssweekly. Of course, do not forget to register a website like TUTS + for weekly updates, courses, free tutorials, and resources now!
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
