The units of the CSS and the Calc () and line-height percentages of the CSS3

Anchor point: Percent minus fixed element in CSS

Company Introduction

When it comes to CSS units, we should first think of the PX, that is, pixels, we are generally used in the page layout px, but in recent years, adaptive page layout More and more, EM and percentages are often used. Then with the popularity of mobile phones, web apps and hybrid app development, all use the CSS3 technology, in the CSS3, a lot of new units, REM, VW and VH, vmin and Vmax, CH and ex, and so on, now do a detailed introduction to these units.

Em

Do the front-end should be not unfamiliar to EM, is not a rare unit, is a relative unit, the reference is the parent element of the font-size, with the characteristics of inheritance. If the font size is 16px (the browser's default value), then 1em = 16px.

However, this is very complicated to use, it is very difficult to correspond with PX, so the front-end development of the predecessors summed up an experience

body {font-size: 62.5%;}

So, after this 1em = 10px in the layout and so on when the use of good conversion of a lot.

Percentage

Percentages believe that we will not be unfamiliar, the percentage is generally broadly speaking relative to the parent element, but not very accurate.

1, for the general positioning element is our understanding of the parent element

2. For Position:absolute, the element is relative to the positioned parent element (offset parent)

3. For position:fixed, the element is relative to ViewPort

Viewport: The visual window, which is the size of the browser windows.

Exceptional cases

1, the use of padding, margin, etc., the actual percentage and the percentage you want is different. (For this, one of the workarounds is that we can use the CSS3 calc () attribute, specifically, you continue to look down and I'll explain at the end of the article.) ）

2, line-height percent of some cases, usually the result is a percentage calculated value. (For this, please keep looking down ...) ）

Rem

REM supports IE9 and above, meaning relative to the root element of HTML (Web page), does not, like EM, depend on the parent element's font size, and cause confusion. It's a lot safer to use.

Html{Font-size: 62.5%;  /**10÷16x100% = 62.5% 1rem = 10px **/} body {font-size: 1.4rem; 
                          
                          /**1.4x10px = 14px **/}h1 { font-size: 2.4rem;  /**2.4x10px = 24px**/}              
                         

So the whole page will be more unified! It will not cause chaos!

VH and VW

These two units are supported by both ie10+ and modern browsers.

VW viewport width, 1vw equals viewport width of 1%

VH viewport height, 1vh equals viewport high of 1%

VW and VH will change automatically with viewport changes, no longer have JS control full screen.

Even some people's insane font sizes are controlled by VW and VH to achieve the effect of font and viewport size synchronization.

Vmin and Vmax

Both ie10+ and modern browsers have supported Vmin

WebKit Browser does not support Vmax before, the new version has been supported, all modern browsers have been supported, but IE all does not support Vmax

Vmin smaller values in VW and VH

higher values in Vmax VW and VH

These two properties also change with viewport

CH and EX

ie9+ and modern browsers are already supported, these two units are based on the relative units of the current font-family .

The width of ch character 0

The height of the ex lowercase character x

Such as:

When the font-family changes, the values of the two units change, and the styles of the different fonts behave differently.

CSS3 's Calc ()

We have mentioned Calc () above, let's talk about it in detail!

Browsers support ie9+, ff4.0+, chrome19+, safari6+

The Calc () syntax is very simple, as we learned to add (+), subtract (-), multiply (*), and (/) as a child, using mathematical expressions to represent:

.haorooms {  width: calc(expression);}

With this padding and margin and percentages, the problem can be solved.

For example, our margin is 20px. Then we can write it.

.haorooms{  width: calc(100% - 20px); //注：减号前后要有空格，否则很可能不生效！！}

You can also use this:

.Box{Background: #f60;Height: 50px;Padding: 10px;Border: 5pxSolid Green;Width: 90%;/* To browsers that do not support calc () */Width:-Moz-Calc(100% - (10px + 5px) * 2);Width:-Webkit-Calc(100% -  (10px  + 5px)  *2);  Width: Calc (100% -  (10px< Span class= "PLN" > + 5px * 2);                /span>                

Line-height percent

The percentage of line-height may be frequently asked during an interview. Do you know the difference between line-height:120% and line-height:1.2, for example?

Now let's talk about the difference between the line height band and the non-unit, for example:

line-height:26px; 表示行高为26个像素line-heigth:120%;表示行高为当前字体大小的120%line-height:2.6em; 表示行高为当前字体大小的2.6倍

The row height with the unit is inherited, and its child elements inherit the computed value, such as the parent element's font size is 14px, the row height line-height:2em is defined, and the computed value is 28px, which does not change the row height because its child elements change the font size. (For example: parent element 14px, child element 12px, then row height is 28px, child element Although the font is 12, row height or parent element row height)

line-height:2.6;表示行高为当前字体大小的2.6倍

Row heights without units are direct inheritance, rather than computed values, such as parent element font size 14px, row height line-height:2; his row height is 28px, child element size is 12px, no need to define row height, his default row height is 24px. (Example: child element 12px, his row height is 24, does not inherit the parent element's 28)

CSS percent minus pixel 1) the first way to implement
CSS Code

1. @body_center_width: ~ ' $ (document). Width ()-400+' px ';
3. #helloworld {
4. Width: @body_center_width;
5. height:200px;
6. Background: #000;
7. }

CSS Code

1. @height: ~ ' document.body.clientwidth-400+' px ';
2. #box {height:200px; width: @height; background:#080; opacity: @height;}

2) The second way of realization
CSS Code

2. /** 1) Shrink CSS code **/
4. . box{
6. border:1px solid #ddd;
8. Width:calc (100%-2px)
10. }
14. /** 2) width, 10em plus 20px. **/  
16. -Shrink CSS Code
18. . box{
20. Width:calc (10em+20px)
22. }
26. /** 3)3 columns and other wide layouts. **/  
28. -Shrink CSS Code
30. . box{
32. margin-left:20px;
34. Width:calc (100%/3-20px);
36. }
38. . Box:nth-child (3n) {
40. Margin-left:0;
42. }

Advanced Expressions
CSS Code

1. -Shrink CSS Code
2. Width:calc (100%/3- 2*1em- 2*1px);
4. It's also possible to write:
5. -Shrink CSS Code
6. Width:calc (100%/ 3- 2 * 1em- 2 * 1px);
8. But it is wrong to write:
9. -Shrink CSS Code
10. Width:calc (100%/3-2*1em-2*1px);

The units of the CSS and the Calc () and line-height percentages of the CSS3