前端工程师面试题总结 - CSS（1）

1. Difference between px and em

“Ems” (em): The “em” is a scalable unit that is used in web document media. 
An em is equal to the current font-size, for instance, if the font-size of the document is12pt,1em is equal to12pt. 
Ems are scalable in nature, so2em would equal24pt, .5em would equal6pt, etc. 
Ems are becoming increasingly popular in web documents due to scalability and their mobile-device-friendly nature. 

Pixels (px): Pixels are fixed-size units that are used in screen media (i.e. to be read on the computer screen). 
One pixel is equal to one dot on the computer screen (the smallest division of your screen’s resolution). 
Many web designers use pixel units in web documents in order to produce a pixel-perfect representation of their site as it is rendered in the browser. 
One problem with the pixel unit is that it does not scale upward for visually-impaired readers or downward to fit mobile devices. 

2. Difference between fixed and absolute in position

• Static is the default position - blocks stack under each other
• Absolute is displayed relative to the document (OR if inside another element is relative to that element as long as it is not static)
• Relative is relative to the document but can be positioned using the top bottom left & right properties and scrolls with the page
• Fixed is displayed fixed to the browser window and therefore doesn't scroll but moves if your resize the window

3. How to fix cross-browser compatibility problem

   (1) Avoid browser specific HTML tags and features.

   (2) Validate HTML / XHTML coding via W3C

   (3) Validate CSS via W3C, and use specific CSS for different browsers:

                -webkit for Chrome, Safari

-moz    for Firefox

                -o         for Opera

                -ms      for IE

4. Why to use reset in CSS

Every browser has it's own "user agent" stylesheet. Reset is used to set these browser default styles to null, thus to minimize cross-browser compatibility problem.