margin赋值为负值的几种效果(负值像素,负值百…
2018-06-24 01:31:43来源:未知 阅读 ()
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赋值为负值的情况,可使自身偏移(或不偏移),其后元素受影响(或不受影响),自身宽度增大(或不增大),会有多种不同的应用场景,请合理选择。
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- CSS中的float和margin的混合使用 2020-06-11
- 相邻元素margin的自动合并与float的坑 2020-04-30
- CCS中的margin:top塌陷问题 2020-03-27
- 89组合margin、padding、float、clear问题 2020-02-22
- 盒子模型: padding,margin,border的含义 2020-02-13
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash