年前做了一个测试题 https://www.wenjuan.com/s/VjaEva/，里面有一道题目涉及到了margin和padding单位为百分比的情况。写出来记录一下以防止自己忘记。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style type="text/css">
7 .warp{
8 width:500px;
9 height:300px;
10 overflow: hidden;
11 background-color: #279186;
12 position: relative;
13 }
14 .ctx{
15 padding:10%;
16 margin:10%;
17 width:100px;
18 height:50px;
19 background-color: #A56D1C;
20 }
21 .top{
22 position: absolute;
23 width: 100%;
24 top:50px;
25 left:0;
26 padding:0;
27 margin:0;
28 color:#333;
29 height:1px;
30 border:0 none;
31 background-color: #333;
32 }
33 .left{
34 position: absolute;
35 width:1px;
36 height:100%;
37 left:50px;
38 top:0;
39 background-color: #333;
40 }
41 </style>
42 </head>
43 <body>
44 <div class="warp">
45 <div class="ctx"></div>
46 <!-- 辅助线 -->
47 <hr class="top " />
48 <div class="left "></div>
49 </div>
50 </body>
51 </html>
在浏览器里表示为
可以见到，padding和margin的单位，都可以用百分比来表示。
之后我又在其他浏览器里测试了一下兼容性，虽然这种百分比单位的方式在PC端用的不是很普遍。
只有IE6下出现了问题。 ie6下marginTop的距离是不对的 IE6效果如下
但是在chrome，IE 7 8 9 10 ，FireFox浏览器上都表现良好
时间： 2024-08-10 23:29:13