図1に示すように、マージントップピクセルは負であります
マージントップピクセルが負で、それ自体に対するオフセット値は、その後、影響を受けた要素は、以下のコードを参照してください。
。<!DOCTYPE HTML> 1 2 <HTML LANG = "ZH"> 3 <ヘッド>。 4 <メタ文字セット= "UTF-8" />。 5 <META HTTP-当量= "X - UA互換"。コンテンツ=「IE =エッジ"/> 6 <タイトル>異なる割当マージン(負パーセント)</タイトル> 7 <スタイルタイプ="テキスト/ CSS「> 8 * { 9マージン:0; 10パディング:0; 11} 12は/スタイル*親要素* / 13 .Pは{ 14マージン:100ピクセル、 15幅:500pxなど; 16高さ:500pxなど; :; 17境界。1ピクセル赤色固体 18である} 。19 {.c1 20は幅:200pxの。 21高さ:200pxの。 境界22がある:1ピクセルソリッドブルー; 23 * / ISトップマージンのピクセルは、影響を受けた要素続い自体に対してオフセット値、* /負で 24トップマージン:-20px; 25} 26 .c2 {さ 27幅:200pxの; 28高さ:200pxの; 29境界:1ピクセルソリッドブルー; 30} 31である</スタイル> 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に示すように、マージン左ピクセルが負であります
マージン左ピクセルが負である、自体に対して、その後要素とオフセット値は影響されない、以下のコードを参照してください。
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>
効果:
要約:これらのマージンは負の値で、それ自体ができオフセット(又はオフセット)が割り当てられ、そこになり、要素が影響を受ける(又は影響)、その幅が増加する(または増加しない)、続いて、より異なるシナリオは、合理的な選択をします。