最近做PC端项目，由于要自适应到800*600，所以免不了要使用百分比的布局方式，但是一开始有点搞不清楚百分比的参照，于是页面的布局怎么调也调不好。
事后我进行了一下总结，希望能够帮到大家：
参照父元素宽度的元素：padding margin width text-indent
参照父元素高度的元素：height
参照父元素属性:font-size line-height
特殊：相对定位的时候，top(bottom) left(right)参照的是父元素的内容区域的高度与宽度，而绝对定位的时候参照的是最近的定位元素包含padding的高度与宽度
下面给一个demo：
先上代码：
<!doctype html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title> ???<style type="text/css"> ???????*{ ???????????margin: 0; ???????????padding: 0; ???????} ???????.box{ ???????????position: relative; ???????????margin-bottom: 10%; ???????????width: 100px; ???????????height: 100px; ???????????padding: 20px; ???????????border: 4px solid blue; ???????????background: red; ???????} ???????.box>.relative-ele{ ???????????z-index: 1; ???????????position: relative; ???????????top: 100%; ???????????left: 100%; ???????????width: 10%; ???????????height: 10%; ???????????padding: 10%; ???????????border: 4px solid yellow; ???????????background: blue; ???????} ???????.box>.absolute-ele{ ???????????z-index: 1; ???????????position: absolute; ???????????top: 100%; ???????????left: 100%; ???????????width: 10%; ???????????height: 10%; ???????????padding: 10%; ???????????border: 4px solid yellow; ???????????background: blue; ???????} ???</style></head><body><div class="box"> ???<div class="relative-ele"></div></div><div class="box"> ???<div class="absolute-ele"></div></div></body></html>父盒子盒模型与相对定位的子盒子的盒模型：
可以看出来相对定位的盒子的百分比定位的top和left值是参照父元素内容的宽度和高度，而不包括padding
父盒子盒模型与绝对定位的子盒子的盒模型：
可以看出来绝对定位后，盒子大小都发生了改变，也就是说子盒子绝对定位之后top和left值会参照最近的定位盒子的padding-box来进行计算，所有大小的计算都要包括父盒子的padding值
附带一点：就是ie7相对定位的参照点不太一样，它参照的是父元素内容的左上角，不包含padding
css百分比参照大总结
原文地址：http://www.cnblogs.com/wherep/p/7666220.html