1, px: pixels, we usually use px page layout.
2 percentage: general broadly speaking is relative to the parent element, adaptive page layout more and more, the percentage is also often used.
3, Viewport
viewport: visual window, which is the browser.
vw Viewport width, 1vw viewport width equal to 1%
vh Viewport height, 1vh equal to 1% of high viewport
CSS3 use Calc
calc () using common mathematical notation, but also provide a more intelligent functions:
> Using "+", "-", "*" and "/" four operations;
> percentage may be used, px, em, rem other units;
> can be mixed with various calculation units;
> expression in the "+ "and" - ", it must have a space before and after, such as" widht: calc (12% + 5em) " this is no writing error space;
> expression with" * "and" / ", the it can be no space before and after, but it is recommended to leave a space.
For example: to set the height of the div element current window height -100px
div {
height: Calc (100vh - 100px);
}