margin、padding单位百分比

　　年前做了一个测试题 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浏览器上都表现良好

posted @ 2016-02-18 17:17  ipCoder  阅读(1263)  评论(0)  编辑  收藏  举报