margin賦值爲負值的幾種效果（負值像素，負值百分數）

時間 2019-11-07

原文原文鏈接

一、margin-top爲負值像素css

margin-top爲負值像素，偏移值相對於自身，其後元素受影響，見以下代碼：html

 1 <!DOCTYPE html>
 2 <html lang="zh">
 3 <head>
 4     <meta charset="UTF-8" />
 5     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 6     <title>margin不一樣賦值狀況（負值，百分數）</title>
 7     <style type="text/css">
 8         *{
 9             margin: 0;
10             padding: 0;
11         }
12         /*父元素樣式*/
13         .p{
14             margin: 100px;
15             width: 500px;
16             height: 500px;
17             border: 1px solid red;
18         }
19         .c1{
20             width: 200px;
21             height: 200px;
22             border: 1px solid blue;
23             /*margin-top爲負值像素，偏移值相對於自身，其後元素受影響*/
24             margin-top: -20px;
25         }
26         .c2{
27             width: 200px;
28             height: 200px;
29             border: 1px solid blue;
30         }
31     </style>
32 </head>
33 <body>
34     <div class="p">
35         <div class="c1">
36             子元素1
37         </div>
38         <div class="c2">
39             子元素2（元素2跟着上移了）
40         </div>
41     </div>
42 </body>
43 </html>

效果：ui

二、margin-left爲負值像素spa

margin-left爲負值像素，偏移值相對於自身，其後元素不受影響，見以下代碼：code

 1 <!DOCTYPE html>
 2 <html lang="zh">
 3 <head>
 4     <meta charset="UTF-8" />
 5     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 6     <title>margin不一樣賦值狀況（負值，百分數）</title>
 7     <style type="text/css">
 8         *{
 9             margin: 0;
10             padding: 0;
11         }
12         /*父元素樣式*/
13         .p{
14             margin: 100px;
15             width: 500px;
16             height: 500px;
17             border: 1px solid red;
18         }
19         .c1{
20             width: 200px;
21             height: 200px;
22             border: 1px solid blue;
23             /*margin-left爲負值像素，偏移值相對於自身，其後元素不受影響*/
24             margin-left: -20px;
25         }
26         .c2{
27             width: 200px;
28             height: 200px;
29             border: 1px solid blue;
30         }
31     </style>
32 </head>
33 <body>
34     <div class="p">
35         <div class="c1">
36             子元素1
37         </div>
38         <div class="c2">
39             子元素2（子元素2不受影響）
40         </div>
41     </div>
42 </body>
43 </html>

效果：htm

三、margin-top爲負值百分數blog

margin-top爲負值百分數，偏移值相對於父元素，其後元素受影響，見以下代碼：it

 1 <!DOCTYPE html>
 2 <html lang="zh">
 3 <head>
 4     <meta charset="UTF-8" />
 5     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 6     <title>margin不一樣賦值狀況（負值，百分數）</title>
 7     <style type="text/css">
 8         *{
 9             margin: 0;
10             padding: 0;
11         }
12         /*父元素樣式*/
13         .p{
14             margin: 100px;
15             width: 500px;
16             height: 500px;
17             border: 1px solid red;
18         }
19         .c1{
20             width: 200px;
21             height: 200px;
22             border: 1px solid blue;
23             /*margin-top爲負值百分數，偏移值相對於父元素，其後元素受影響*/
24             margin-top: -20%;
25         }
26         .c2{
27             width: 200px;
28             height: 200px;
29             border: 1px solid blue;
30         }
31     </style>
32 </head>
33 <body>
34     <div class="p">
35         <div class="c1">
36             子元素1
37         </div>
38         <div class="c2">
39             子元素2（子元素2受影響）
40         </div>
41     </div>
42 </body>
43 </html>

效果：class

四、margin-left爲負值百分數meta

margin-left爲負值百分數，偏移值相對於父元素，其後元素不受影響，見以下代碼：

 1 <!DOCTYPE html>
 2 <html lang="zh">
 3 <head>
 4     <meta charset="UTF-8" />
 5     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 6     <title>margin不一樣賦值狀況（負值，百分數）</title>
 7     <style type="text/css">
 8         *{
 9             margin: 0;
10             padding: 0;
11         }
12         /*父元素樣式*/
13         .p{
14             margin: 100px;
15             width: 500px;
16             height: 500px;
17             border: 1px solid red;
18         }
19         .c1{
20             width: 200px;
21             height: 200px;
22             border: 1px solid blue;
23             /*margin-left爲負值百分數，偏移值相對於父元素，其後元素不受影響*/
24             margin-left: -20%;
25         }
26         .c2{
27             width: 200px;
28             height: 200px;
29             border: 1px solid blue;
30         }
31     </style>
32 </head>
33 <body>
34     <div class="p">
35         <div class="c1">
36             子元素1
37         </div>
38         <div class="c2">
39             子元素2（子元素2不受影響）
40         </div>
41     </div>
42 </body>
43 </html>

效果：

五、margin-right爲負值像素且不設置寬度

margin-right爲負值像素且不設置寬度，無偏移值，其後元素不受影響，自身寬度變大,見以下代碼：

 1 <!DOCTYPE html>
 2 <html lang="zh">
 3 <head>
 4     <meta charset="UTF-8" />
 5     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 6     <title>margin不一樣賦值狀況（負值，百分數）</title>
 7     <style type="text/css">
 8         *{
 9             margin: 0;
10             padding: 0;
11         }
12         /*父元素樣式*/
13         .p{
14             margin: 100px;
15             width: 500px;
16             height: 500px;
17             border: 1px solid red;
18         }
19         .c1{
20             /*關鍵點:不設置寬度*/
21             /*width: 200px;*/
22             height: 200px;
23             border: 1px solid blue;
24             /*margin-right爲負值像素且不設置寬度，無偏移值，其後元素不受影響*/
25             margin-right: -100px;
26         }
27         .c2{
28             width: 200px;
29             height: 200px;
30             border: 1px solid blue;
31         }
32     </style>
33 </head>
34 <body>
35     <div class="p">
36         <div class="c1">
37             子元素1
38         </div>
39         <div class="c2">
40             子元素2（子元素2不受影響）
41         </div>
42     </div>
43 </body>
44 </html>

效果：

六、margin-right爲負值百分數且不設置寬度

margin-right爲負值百分數且不設置寬度，無偏移值,自身寬度變寬(寬度值爲父元素寬度值*百分比)，其後元素不受影響，見以下代碼：

 1 <!DOCTYPE html>
 2 <html lang="zh">
 3 <head>
 4     <meta charset="UTF-8" />
 5     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 6     <title>margin不一樣賦值狀況（負值，百分數）</title>
 7     <style type="text/css">
 8         *{
 9             margin: 0;
10             padding: 0;
11         }
12         /*父元素樣式*/
13         .p{
14             margin: 100px;
15             width: 500px;
16             height: 500px;
17             border: 1px solid red;
18         }
19         .c1{
20             /*關鍵點:不設置寬度*/
21             /*width: 200px;*/
22             height: 200px;
23             border: 1px solid blue;
24             /*margin-right爲負值百分數且不設置寬度，無偏移值,自身寬度變寬(寬度值爲父元素寬度值*百分比)，其後元素不受影響*/
25             margin-right: -20%;
26         }
27         .c2{
28             width: 200px;
29             height: 200px;
30             border: 1px solid blue;
31         }
32     </style>
33 </head>
34 <body>
35     <div class="p">
36         <div class="c1">
37             子元素1
38         </div>
39         <div class="c2">
40             子元素2（子元素2不受影響）
41         </div>
42     </div>
43 </body>
44 </html>

效果：

七、margin-bottom:爲負值像素

margin-bottom:爲負值像素，自身無偏移值,，其後元素受影響(上移了)，見以下代碼：

 1 <!DOCTYPE html>
 2 <html lang="zh">
 3 <head>
 4     <meta charset="UTF-8" />
 5     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 6     <title>margin不一樣賦值狀況（負值，百分數）</title>
 7     <style type="text/css">
 8         *{
 9             margin: 0;
10             padding: 0;
11         }
12         /*父元素樣式*/
13         .p{
14             margin: 100px;
15             width: 500px;
16             height: 500px;
17             border: 1px solid red;
18         }
19         .c1{
20             width: 200px;
21             height: 200px;
22             border: 1px solid blue;
23             /*margin-bottom:爲負值像素，自身無偏移值,，其後元素受影響(上移了)*/
24             margin-bottom: -100px;
25         }
26         .c2{
27             width: 200px;
28             height: 200px;
29             border: 1px solid blue;
30         }
31     </style>
32 </head>
33 <body>
34     <div class="p">
35         <div class="c1">
36             子元素1
37         </div>
38         <div class="c2">
39             子元素2（子元素2受影響,上移了）
40         </div>
41     </div>
42 </body>
43 </html>

效果：

8、margin-bottom:爲負值百分數

margin-bottom:爲負值百分數，自身無偏移值,，其後元素受影響(上移了,上移大小爲父元素寬度值*20%)，見以下代碼：

 1 <!DOCTYPE html>
 2 <html lang="zh">
 3 <head>
 4     <meta charset="UTF-8" />
 5     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 6     <title>margin不一樣賦值狀況（負值，百分數）</title>
 7     <style type="text/css">
 8         *{
 9             margin: 0;
10             padding: 0;
11         }
12         /*父元素樣式*/
13         .p{
14             margin: 100px;
15             width: 800px;
16             height: 500px;
17             border: 1px solid red;
18         }
19         .c1{
20             width: 200px;
21             height: 200px;
22             border: 1px solid blue;
23             /*margin-bottom:爲負值百分數，自身無偏移值,，其後元素受影響(上移了,上移大小爲父元素寬度值*20%)*/
24             margin-bottom: -20%;
25         }
26         .c2{
27             width: 200px;
28             height: 200px;
29             border: 1px solid blue;
30         }
31     </style>
32 </head>
33 <body>
34     <div class="p">
35         <div class="c1">
36             子元素1
37         </div>
38         <div class="c2">
39             子元素2（子元素2受影響,上移了）
40         </div>
41     </div>
42 </body>
43 </html>