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赋值为负值的几种效果（负值像素，负值百分数）相关推荐

  1. margin为负值的几种情况

    1.margin-top为负值像素 margin-top为负值像素,偏移值相对于自身,其后元素受影响,见如下代码: 1 <!DOCTYPE html>2 <html lang=&qu ...

  2. layui table 表格两种赋值方式下，data分页效果有效， url分页效果的失效 问题的解决。

    layui table 表格两种赋值方式下,data分页效果有效, url分页效果的失效 问题的解决. 参考文章: (1)layui table 表格两种赋值方式下,data分页效果有效, url分页 ...

  3. php变量赋值有几种,【后端开辟】php变量赋值体式格局有几种

    php变量赋值体式格局有几种? php中变量的3中赋值体式格局 1.传值赋值,比方$a=1,$b=$a等: 2.援用赋值,比方$a=&$b,即$a和$b在都指向了内存中的同一个存储变量值得地点 ...

  4. UICollectionView 横向滑动停止的两种效果。

    UICollectionView 横向停止的两种效果. 类似于 Airbnb 这款App的首页酒店效果,从最开始的减速停止效果,到现在的分页效果. 本文主要说一下Demo的关键类及代码的使用, 还有算 ...

  5. html css部分背景模糊效果,CSS3实现模糊背景的三种效果示例

    不开头了,直接进入主题. 普通背景模糊效果如下: 使用属性: filter:(2px) 普通背景模糊 为了美观不能使背景前的文字模糊,而filter属性会使这整个div的后代并且还会出现白边.也就是说 ...

  6. Python使用matplotlib可视化发散型条形图、发散条形图（Diverging Bars）是一种可以同时处理负值和正值的条形图、并按照大小排序区分数据（Diverging Bars）

    Python使用matplotlib可视化发散型条形图.发散条形图(Diverging Bars)是一种可以同时处理负值和正值的条形图.并按照大小排序区分数据(Diverging Bars) 目录

  7. R语言ggplot2可视化发散型条形图、发散条形图（Diverging Bars）是一种可以同时处理负值和正值的条形图、并按照大小排序区分数据（Diverging Bars）

    R语言ggplot2可视化发散型条形图.发散条形图(Diverging Bars)是一种可以同时处理负值和正值的条形图.并按照大小排序区分数据(Diverging Bars) 目录

  8. html5二次元插件,送你PS一键制作动漫二次元插件，80套背景+50种效果+20款中英字体...

    原标题:送你PS一键制作动漫二次元插件,80套背景+50种效果+20款中英字体 啦啦啦,柠檬又来给同学们分享福利咯!今天带给你们的是一款能够快速把照片转换成二次元风格的PS插件. 本款插件是完全智能化 ...

  9. jQuery自定义漂亮的下拉框插件8种效果演示

    原始的下拉框不好看这里推荐一个jQuery自定义漂亮的下拉框插件8种效果演示  在线预览 下载地址 实例代码 <!DOCTYPE html> <html lang="en& ...

最新文章

  1. SAP RETAIL 商品主数据里的Contents
  2. 基于ESP32的竞赛裁判系统功能调试-光电条检测板
  3. SQL Server几个常用Date函数（二）
  4. “云”端的语雀：用 JavaScript 全栈打造商业级应用
  5. Windows 7 扩展玻璃效果（Aero Glass）
  6. requirejs配置问题
  7. 详细讲述STP过程【转自56cto.com】
  8. mysql各种引擎对比、实战
  9. mysql schema 保存数据_如何在mysql数据库中保存apache spark schema输出
  10. shell执行perl_TOOLFK工具-在线Perl代码执行工具
  11. Linux下安装和卸载jdk步骤详述
  12. 服务器中打开IIS管理器
  13. 【深入理解多线程】 Moniter的实现原理（四）
  14. Mysql学习笔记day3 --三天学完mysql所有知识点
  15. 5A学友的备考心得 | PMP考试如何一把过？
  16. [hitroad杂货铺]KaTeX使用
  17. 运用Java获取当前时间
  18. 关于fancybox打开动态加载的图片
  19. 转载一位老码农的技术理想
  20. LUA 和 JAVA 的区别

热门文章

  1. 使用java自带的日志管理_java日志管理
  2. 02.Python 3.6.4下载与安装
  3. android 开发
  4. scala入门-10 隐式转换、隐式参数、隐式类
  5. 在论坛中出现的各种疑难问题：日志收缩问题
  6. 抓到一只苍蝇 writeup
  7. linux shell 自定义函数(定义、返回值、变量作用域）介绍
  8. 国家普通话水平智能测试软件,国家普通话水平智能测试系统注意事项
  9. sas infile和filename
  10. AUTOSAR从入门到精通100讲（四十）-嵌入式中的CAN总线