marginpadding单位百分比

Posted 2020-06-14

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了marginpadding单位百分比相关的知识，希望对你有一定的参考价值。

　　年前做了一个测试题 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>