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 ...
随机推荐
- python Python程序的架构
- 【转】Sprague-Grundy函数
http://www.cnitblog.com/weiweibbs/articles/42735.html 上一期的文章里我们仔细研究了Nim游戏,并且了解了找出必胜策略的方法.但如果把Nim的规则略 ...
- python 终端编码
- 洛谷1758 BZOJ1566 管道取珠题解
题目链接 一道人类智慧的dp题 首先我们可以将∑ai^2转化为求取两次,两次一样的方案数 然后用f[i][j][k][l]表示第一个人在第一个串中取到i第二个串中取到j 第二个人在一个串中取到k第二个 ...
- vue cli3 子目录问题
在使用 vue-cli3 build的时候,使用非子目录需要在 vue.config.js 中添加如下代码: module.exports = { baseUrl: process.env.NODE_ ...
- 微信小程序中支持es7的async语法
最近在原生的微信小程序项目中需要把原来es6的promise方法改成es7的async await,这样代码看起来更直观,也方便以后的兄弟维护,但是改了代码之后项目就报错了. 提示的错误是:regen ...
- js中的超过16位数字相加问题
方案一 function sub(str1, str2) { // 补全0,并多补一位0 let arr1 = null, arr2 = null if (str1.length > str2. ...
- Alpha版本第一周作业
姓名 学号 周前计划安排 每周实际工作记录 自我打分 LTR 61213 1.撰写博客2.分配具体任务并完成个人任务 1.已完成博客撰写2.任务分配完成并继续构思实现方法 95 LHL 61212 完 ...
- @atcoder - AGC037F@ Counting of Subarrays
目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定 L,连续至少 L 个相同的数 k 可以合并成 1 个 k+ ...
- 如何解决iOS内存错误
由于iOS5.0之前没有自动应用计数机制,也没有Java那样的垃圾回收功能.我们都需要自己管理和控制对象的回收,这是一件很麻烦的事情,也是做iOS项目中最容易出现的问题.如果不掌握这些方法,调试这些问 ...