彻底掌握CSS中的percentage百分比值使用

1.相对定位元素，它的父元素符合标签嵌套。
2.绝对定位元素，它的父元素是离它最近的定位元素（绝对定位，相对定位，固定，但不包括浮动）或者视窗尺寸（没找到定位元素时）。
3.浮动元素，它的父元素也符合标签嵌套。
4.固定元素（特殊的绝对定位），它的父元素是视窗（浏览器默认用来展示内容的区域的尺寸，不是html 或body 的尺寸）。
注意一下绝对定位就行了，其他的相对简单。

1.   
2.   
3.   
4.      
5.      
6.      
7.     html {   
8.         width:1000px;   
9.     }   
10.     body {   
11.         width:800px;   
12.     }   
13.     #box {   
14.         width:50%;   
15.         height:300px;   
16.         position: absolute;   
17.         margin-left: 200px;   
18.         border: 1px solid red;   
19.     }   
20.     #can {   
21.         position:absolute;   
22.         top:100px;   
23.         left:100px;   
24.         width:50%;   
25.         height:50%;   
26.         border:1px solid black;   
27.     }   
28.       
29.      
30.   
31.     "box">   
32.         "can">   
33.        
34.        
35.      
36.   

box 宽度为视窗的一半，can 的宽高是 box 的宽高的一半。
将 can 设置为 position: fixed; 则其父元素将不再是 box 而是浏览器视窗。

can 的宽高是视窗宽高的一半。
浮动元素的父元素跟普通元素的父元素是一样的。

1.   
2.   
3.   
4.      
5.      
6.      
7.     html {   
8.         width:1000px;   
9.     }   
10.     body {   
11.         width:800px;   
12.     }   
13.     #box {   
14.         width:50%;   
15.         height:300px;   
16.         position: absolute;   
17.         margin-left: 200px;   
18.         border: 1px solid red;   
19.     }   
20.     #can {   
21.         float:left;   
22.         width:50%;   
23.         height:50%;   
24.         border:1px solid black;   
25.     }   
26.       
27.      
28.   
29.     "box">   
30.         "can">   
31.        
32.        
33.      
34.   

注意： padding、 margin 如果设置了百分比，上，下，左，右 用的都是父元素宽度 的值为标准去计算。

percentage转px
Example 1: Margins

1. "width: 20px">   
2. "temp1" style="margin-top: 50%">Test top   
3. "temp2" style="margin-right: 25%">Test rightright   
4. "temp3" style="margin-bottom: 75%">Test bottombottom   
5. "temp4" style="margin-left: 100%">Test left   
6.   

得到的offset如下：

1. temp1.marginTop = 20px * 50% = 10px;   
2. temp2.marginRight = 20px * 25% = 5px;   
3. temp3.marginBottom = 20px * 75% = 15px;   
4. temp4.marginLeft = 20px * 100% = 20px;  

然后，我又测试了padding，原以为padding的值会根据应用了该属性的相关元素来计算，但让我惊讶的是，padding也是根据应用该属性的父元素的宽来计算的，跟margin表现一致。(再插一句：当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的,元素竖向的百分比设定也是相对于容器的宽度，而不是高度。)
但有一个坑，上面都是对于未定位元素。好奇的我又很好奇，对于非静态定位元素的top, right, bottom, 和left的百分比值又怎么计算呢？
Example 2: Positioned Elements

1. "height: 100px; width: 50px">   
2. "temp1" style="position: relative; top: 50%">Test top   
3. "temp2" style="position: relative; right: 25%">Test rightright   
4. "temp3" style="position: relative; bottom: 75%">Test bottombottom   
5. "temp4" style="position: relative; left: 100%">Test left   
6.   

得到的offset如下：

1. temp1.top = 100px * 50% = 50px;   
2. temp2.rightright = 100px * 25% = 25px;   
3. temp3.bottombottom = 100px * 75% = 75px;   
4. temp4.left = 100px * 100% = 100px;  

对于定位元素，这些值也是相对于父元素的，但与非定位元素不同的是，它们是相对于父元素的高而不是宽。
when the parent element does not have a height, then percentage values are processed as auto instead
虽然有点困惑，但只需要记住：对于margin和padding，百分比按照父元素的宽计算，对于定位元素，则按照父元素的高计算。
文章的最后，推荐一个网站：http://www.css3.com，上面有很多关于CSS问题的资源。