层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现
HTML（
标准通用标记语言的一个应用）或
XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
[1] CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
SS支持多种单位形式，如百分比、px、pt、rem等，百分比和px是常用的单位，随着移动端和响应式的流行，rem、vh、vw也开始普遍使用。
今天在SegmentFault社区碰到了两个关于百分比计算的问题，一个是在translate中使用百分比的时候，是相对于哪个DOM元素的大小计算的；另外一个是在padding、margin等中使用百分比时，百分比又是怎么转为px的呢？
对于第一个，移动距离是根据自身元素的大小来计算的：
[The percentage] refer[s] to the size of the element's box
例如：在不知道元素的宽度和高度的情况下，让元素水平垂直居中
创建类名为wrapper的div，并设置其样式
.wrapper { padding: 20px; background:orange; color:#fff; position:absolute; top:50%; left:50%; border-radius: 5px; -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); transform:translate(-50%,-50%); }
对于第二个，我认为percentage转px应该是浏览器根据css规定来完成的，但是具体怎么算呢？
Example 1: Margins
style="width: 20px"> id="temp1" style="margin-top: 50%">Test top