Explain in detail the meaning of CSS units Px,em and REM and the difference between them

I. First introduce the PX

PX is the most basic length of the CSS, the unit with PX do not have any problems, you can make the page according to the precise presentation of the routine!

But it is! But, but! If the entire use of PX layout will hide an egg pain problem, that is, when the user and Ctrl roll the page (white is ctrl+,ctrl-), you will find the page structure produced unpredictable confusion, so there are bricks advocate using em instead of px ...

Two. Next Introduce EM

If you read this article from top to bottom, you should already know the cause of EM, the following is the characteristics of EM, simply say PX is absolute unit, 1px is 1px,2px is 2px, and so on, and the EM is relative units, EM relative to the reference point is the browser font size, Browser default font size is 16px, that is 1em default equals 16px, if you want to set a text to 14px, so write font-size:0.875em; The formula is 14/16=0.875em, if you want 15px, then it's 15. /16=0.938em, e.g. Margin:0.938em; And so on, the style sheet with the em to write, you can solve the ctrl+,ctrl-caused by the problem of page confusion, commonly used in the EM table as follows

At this time someone and I will complain, my maths is taught by the P.E. teacher, divided by 16 how can I figure out, that's good you can redefine the base font size html {font-size:62.5%} on the root node

But it is! But, but! Again, EM is accurate relative to the parent node's font size to calculate, if you define the font size then relative to the size of their own to calculate, for example, as follows:

HTML {font-size:100%;}. box-0 {    height:1em;/* at which height equals 16px */}.box-1 {     font-size:0.625em;/* The base font size is changed to 16*0.625=10px *     /height: 1em; /* At this time the actual height equals 10px */}

See, in the entire page 1em is not a fixed value, 1em constant transformation, coupled with mathematics is taught by the PE teacher, this is not self-inflicted ... It's okay, CSS3. Introducing a new unit for us is REM can solve this problem

Three. Finally introduce the protagonist REM

REM and EM are also a relative unit, for the convenience of understanding, we understand rem as root em, as the name implies REM only relative to node HTML {font-size:62.5%} so 1rem is equal to 10px, etc...

To declare: REM is the CSS3 attribute, yes! This means that Dick Silk ie678 does not support REM properties, only Chrome, Firefox and other high-fidelity support! Then we will use PX in the ie678 to do compatible processing, for example:

. box {font-size:14px;/* for compatibility with ie678 */font-size:0.875em;}

Explain in detail the meaning of CSS units Px,em and REM and the difference between them