CSS units and CSS3 Calc () and line-height percent

Say in front of the words

The Gregorian calendar 2014 has been far away from us, 2015. Wish you all a happy New Year! In the new year, I will have a new metamorphosis! This is the first article in 2015, write an article about the unit of CSS! Company IntroductionWhen it comes to CSS units, we should first think of PX, that is, pixels, we are in the layout of the page is generally used PX, but in recent years, adaptive page layout More and more, EM and the percentage is often used. Then with the popularity of mobile phones, the development of web apps and hybrid apps, all used CSS3 technology, in CSS3, many new units, REM, VW and VH, vmin and Vmax, CH and ex, and so on, now give a detailed description of these units.

emDo the front-end should be not unfamiliar to EM, is not a rare unit, is a relative unit, reference is the parent element of the font-size, with the characteristics of inheritance.   If the font size is 16px (the default for the browser), then 1em = 16px. However, this use is very complex, it is difficult to correspond with the PX, so the front-end development of predecessors summed up an experience

Body {
font-size:62.5%;
}

So, then 1em = 10px in the layout of the use of time good conversion a lot. percentPercentage I believe that we will not be unfamiliar, the percentage generally speaking is relative to the parent element, but not very accurate. 1, for the general positioning element is our understanding of the parent element 2, for the Position:absolute element is relative to the defined parent element (offset parent) 3, the element for position:fixed is relative to the ViewPort Viewport: The visual window, which is the size of the browser window. exceptional Circumstances1, the use of padding, margin, and so on, the actual percentage and the percentage you want to have a difference. (about this, one of the solutions is that we can use the CSS3 calc () attribute, and you go ahead and look at the end of the article, I'll explain.) 2, the line-height percentage of some cases, usually the result is the value of the percentage calculation. (For this, please continue to look down ...) ） REMREM supports IE9 and above, meaning that relative to the root element HTML (Web page), it does not depend on the font size of the parent element as EM does, causing 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! will not cause confusion! VH and VWie10+ and modern browsers support these two units.   VW viewport width, 1VW is equal to viewport width 1% vh viewport height, 1VH equals viewport high 1% VW and VH will change automatically with viewport changes, no JS control full-screen. Even some people are insane. Font sizes are controlled with VW and VH to achieve the effect of font and viewport size synchronization. Vmin and Vmaxie10+ and modern browsers have supported Vmin WebKit browsers do not support Vmax before, the new version has been supported, all modern browsers have been supported, but IE all do not support Vmax Vmin VW and VH in the relatively small values Vmax VW and VH of the larger values of the two properties It will change with viewport. ch and exBoth ie9+ and modern browsers have been supported, and these two units are based on the relative units of the current font-family. The width of the ch character 0, the height of the ex lowercase character x, is as follows: Enter image description Here when the font-family changes, the values of these two units also change, and the styles of different fonts behave differently. CSS3 Calc ()Above we have mentioned Calc (), let's talk about it specifically! Browsers support ie9+, ff4.0+, chrome19+, safari6+ calc () syntax is very simple, just like when we were kids learning to add (+), subtract (-), multiply (*), except (/), use mathematical expressions to represent:

. haorooms {
Width:calc (expression);
}

So padding and margin and percentages together, the problem can be solved. For example, our margin is 20px. Then we can write

. haorooms{
Width:calc (100%-20px); Note: Before and after the minus sign must have the space, otherwise very possibly does not take effect!!
}

You can also use this:

. box {
Background: #f60;
height:50px;
padding:10px;
border:5px solid Green;
width:90%;/* to a browser that does not support calc () *
Width:-moz-calc (100%-(10px + 5px) * 2);
Width:-webkit-calc (100%-(10px + 5px) * 2);
Width:calc (100%-(10px + 5px) * 2);
}

Line-height percent

Line-height percentages may often be asked in an interview. For example, do you know the difference between line-height:120% and line-height:1.2?

Now let's talk about the difference between a row and a unit, such as the following example:

line-height:26px; Represents a row height of 26 pixels

line-heigth:120% indicates that the row height is 120% of the current font size

Line-height:2.6em; Indicates that the row height is 2.6 times times the current font size

The row heights with units are inherited, and their child elements inherit computed values, such as the font size of the parent element is 14px, the row height is line-height:2em, and the computed value is 28px, and the row height is not changed because the child element changes the font size. (For example: parent element 14px, child element 12px, then row height is 28px, child element Although font is 12, row height or parent element row height)

line-height:2.6 indicates that the row height is 2.6 times times the current font size

Row heights without units are directly inherited, not computed, such as the parent element font size is 14px, row height is line-height:2; his row height is 28px, child element size is 12px, no further definition of row height is required, and his default row height is 24px. (For example: the child element 12px, his row height is 24, does not inherit the parent element 28)