margin、padding單位百分比

時間 2019-11-30

原文原文鏈接

　　年前作了一個測試題 https://www.wenjuan.com/s/VjaEva/，裏面有一道題目涉及到了margin和padding單位爲百分比的狀況。寫出來記錄一下以防止本身忘記。css

 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>