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赋值为负值的情况，可使自身偏移（或不偏移），其后元素受影响（或不受影响），自身宽度增大（或不增大），会有多种不同的应用场景，请合理选择。
margin为负值的几种情况的更多相关文章
- html/css基础篇——DOM中关于脱离文档流的几种情况分析
所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版中拿走. ...
- 使用jQuery获取元素的宽度或高度的几种情况
今天说说使用jQuery获取元素大小的遇到几种情况 使用jQuery获取元素的宽度或高度的有几种情况: 1.使用width(),它只能获取当前元素的内容的宽度: 2.使用innerWidth(),它只 ...
- CSS外边距合并的几种情况
CSS外边距合并的几种情况 外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 外边距在CSS1中就有 The width ...
- Tomcat内存溢出的三种情况及解决办法分析
Tomcat内存溢出的原因 在生产环境中tomcat内存设置不好很容易出现内存溢出.造成内存溢出是不一样的,当然处理方式也不一样. 这里根据平时遇到的情况和相关资料进行一个总结.常见的一般会有下面三种 ...
- Objective C中数组排序几种情况的总结
总结OC中数组排序3种方法:sortedArrayUsingSelector:;sortedArrayUsingComparator:;sortedArrayUsingDescriptors: 数组排 ...
- js内存泄露的几种情况
想解决内存泄露问题,必须知道什么是内存泄露,什么情况下出现内存泄露,才能在遇到问题时,逐个排除.这里只讨论那些不经意间的内存泄露. 一.什么是内存泄露 内存泄露是指一块被分配的内存既不能使用,又不能回 ...
- LoadRunner 场景运行error的几种情况
一. Error -27727: Step download timeout (120 seconds)has expired when downloading resource(s). Set th ...
- JS生成某个范围的随机数（四种情况）
前言: JS没有现成的函数,能够直接生成指定范围的随机数. 但是它有个函数:Math.random() 这个函数可以生成 [0,1) 的一个随机数. 利用它,我们就可以生成指定范围内的随机数. 而涉 ...
- SET Transaction Isolation Level Read语法的四种情况
转自:http://www.cnblogs.com/qanholas/archive/2012/01/04/2312152.html 存储过程:SET Transaction Isolation Le ...
随机推荐
- iOS 停止不必要的UI动效设计
http://www.cocoachina.com/design/20151124/14400.html 前言:这篇短文将会探讨UI设计中动画的过度使用,并将其与早期的视觉设计进行对比,提出一些对于有 ...
- postman测试接口各种类型传值
postman测试接口各种类型传值 标签: postman测试 json串 Map 2018年01月27日 02:32:00 145人阅读 评论(0) 收藏 举报 1.Map类型或实体类类型传值,即j ...
- iOS 适配iPhoneX上tableHeaderView发生了高度拉伸、UI出现的空白间距
记录下前阵子遇到的一个问题,草稿箱里记录的有点潦草,讲下大概吧. 异常如下,粉色区域作为tableHeader放上去的(注意不是sectionHeader) header初始化之后一切正常,frame ...
- 【NS2】有线和无线混合场景 （转载）
1. 创建简单的有线-无线混合场景 上一节建立的无线仿真可以支持多跳adhoc网络或wirelesslan.但是,我们可能需要对经过有线网络连接的多个无线网络进行仿真,或者说我们需要对有线-无线混合网 ...
- jQuery简介,安装
什么是 jQuery ? jQuery是一个JavaScript函数库. jQuery是一个轻量级的"写的少,做的多"的JavaScript库. jQuery库包含以下功能: HT ...
- python 数据集变量的数据类型总结
- oralce GROUPING
/*从上面的结果中我们很容易发现,每个统计数据所对应的行都会出现null, 如何来区分到底是根据那个字段做的汇总呢,grouping函数判断是否合计列!*/ select decode(groupin ...
- HDU-1069_Monkey and Banana
Monkey and Banana Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) P ...
- 60.0.1（64位）windows版 uploadify使用有问题
http://mozilla.com.cn/thread-403024-1-1.html 60.0.1(64位)版,在使用uploadify插件,上传附件时,上传没有问题,可以成功,但执行上传成功后的 ...
- python基础---集合类型(Sets)
集合类型(Sets) 集合对象是不同的(不可重复)hashable对象的无序集合.常见用法包括:成员关系测试.移除序列中的重复.以及科学计算,例如交集.并集.差分和对称差分.通俗点来说,集合是一个无序 ...