margin为负值的几种情况
生活随笔
收集整理的這篇文章主要介紹了
margin为负值的几种情况
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1、margin-top為負值像素
margin-top為負值像素，偏移值相對于自身，其后元素受影響，見如下代碼：
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>效果：
?
2、margin-left為負值像素
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: -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>效果：
?
3、margin-top為負值百分數
margin-top為負值百分數，偏移值相對于父元素，其后元素受影響，見如下代碼：
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>效果：
?4、margin-left為負值百分數
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>效果：
5、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>效果：
?
?6、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>?
效果：
7、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>?
效果：
?
總結：以上是margin賦值為負值的情況，可使自身偏移（或不偏移），其后元素受影響（或不受影響），自身寬度增大（或不增大），會有多種不同的應用場景，請合理選擇。
轉載于:https://www.cnblogs.com/andyZhang0511/p/11209503.html
總結
以上是生活随笔為你收集整理的margin为负值的几种情况的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 二维码相关
- 下一篇： GetWindowText和GetDlg