margin赋值为负值的几种效果（负值像素，负值百分数）
1、margin-top为负值像素
margin-top为负值像素，偏移值相对于自身，其后元素受影响，见如下代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>margin不同赋值情况（负值，百分数）</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
/*父元素样式*/
.p{
margin: 100px;
width: 500px;
height: 500px;
border: 1px solid red;
}
.c1{
width: 200px;
height: 200px;
border: 1px solid blue;
/*margin-top为负值像素，偏移值相对于自身，其后元素受影响*/
margin-top: -20px;
}
.c2{
width: 200px;
height: 200px;
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="p">
<div class="c1">
子元素1
</div>
<div class="c2">
子元素2（元素2跟着上移了）
</div>
</div>
</body>
</html>
效果：
2、margin-left为负值像素
margin-left为负值像素，偏移值相对于自身，其后元素不受影响，见如下代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>margin不同赋值情况（负值，百分数）</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
/*父元素样式*/
.p{
margin: 100px;
width: 500px;
height: 500px;
border: 1px solid red;
}
.c1{
width: 200px;
height: 200px;
border: 1px solid blue;
/*margin-left为负值像素，偏移值相对于自身，其后元素不受影响*/
margin-left: -20px;
}
.c2{
width: 200px;
height: 200px;
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="p">
<div class="c1">
子元素1
</div>
<div class="c2">
子元素2（子元素2不受影响）
</div>
</div>
</body>
</html>
效果：
3、margin-top为负值百分数
margin-top为负值百分数，偏移值相对于父元素，其后元素受影响，见如下代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>margin不同赋值情况（负值，百分数）</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
/*父元素样式*/
.p{
margin: 100px;
width: 500px;
height: 500px;
border: 1px solid red;
}
.c1{
width: 200px;
height: 200px;
border: 1px solid blue;
/*margin-top为负值百分数，偏移值相对于父元素，其后元素受影响*/
margin-top: -20%;
}
.c2{
width: 200px;
height: 200px;
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="p">
<div class="c1">
子元素1
</div>
<div class="c2">
子元素2（子元素2受影响）
</div>
</div>
</body>
</html>
效果：
4、margin-left为负值百分数
margin-left为负值百分数，偏移值相对于父元素，其后元素不受影响，见如下代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>margin不同赋值情况（负值，百分数）</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
/*父元素样式*/
.p{
margin: 100px;
width: 500px;
height: 500px;
border: 1px solid red;
}
.c1{
width: 200px;
height: 200px;
border: 1px solid blue;
/*margin-left为负值百分数，偏移值相对于父元素，其后元素不受影响*/
margin-left: -20%;
}
.c2{
width: 200px;
height: 200px;
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="p">
<div class="c1">
子元素1
</div>
<div class="c2">
子元素2（子元素2不受影响）
</div>
</div>
</body>
</html>
效果：
5、margin-right为负值像素且不设置宽度
margin-right为负值像素且不设置宽度，无偏移值，其后元素不受影响，自身宽度变大,见如下代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>margin不同赋值情况（负值，百分数）</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
/*父元素样式*/
.p{
margin: 100px;
width: 500px;
height: 500px;
border: 1px solid red;
}
.c1{
/*关键点:不设置宽度*/
/*width: 200px;*/
height: 200px;
border: 1px solid blue;
/*margin-right为负值像素且不设置宽度，无偏移值，其后元素不受影响*/
margin-right: -100px;
}
.c2{
width: 200px;
height: 200px;
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="p">
<div class="c1">
子元素1
</div>
<div class="c2">
子元素2（子元素2不受影响）
</div>
</div>
</body>
</html>
效果：
6、margin-right为负值百分数且不设置宽度
margin-right为负值百分数且不设置宽度，无偏移值,自身宽度变宽(宽度值为父元素宽度值*百分比)，其后元素不受影响，见如下代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>margin不同赋值情况（负值，百分数）</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
/*父元素样式*/
.p{
margin: 100px;
width: 500px;
height: 500px;
border: 1px solid red;
}
.c1{
/*关键点:不设置宽度*/
/*width: 200px;*/
height: 200px;
border: 1px solid blue;
/*margin-right为负值百分数且不设置宽度，无偏移值,自身宽度变宽(宽度值为父元素宽度值*百分比)，其后元素不受影响*/
margin-right: -20%;
}
.c2{
width: 200px;
height: 200px;
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="p">
<div class="c1">
子元素1
</div>
<div class="c2">
子元素2（子元素2不受影响）
</div>
</div>
</body>
</html>
效果：
7、margin-bottom:为负值像素
margin-bottom:为负值像素，自身无偏移值,，其后元素受影响(上移了)，见如下代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>margin不同赋值情况（负值，百分数）</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
/*父元素样式*/
.p{
margin: 100px;
width: 500px;
height: 500px;
border: 1px solid red;
}
.c1{
width: 200px;
height: 200px;
border: 1px solid blue;
/*margin-bottom:为负值像素，自身无偏移值,，其后元素受影响(上移了)*/
margin-bottom: -100px;
}
.c2{
width: 200px;
height: 200px;
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="p">
<div class="c1">
子元素1
</div>
<div class="c2">
子元素2（子元素2受影响,上移了）
</div>
</div>
</body>
</html>
效果：
8、margin-bottom:为负值百分数
margin-bottom:为负值百分数，自身无偏移值,，其后元素受影响(上移了,上移大小为父元素宽度值*20%)，见如下代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>margin不同赋值情况（负值，百分数）</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
/*父元素样式*/
.p{
margin: 100px;
width: 800px;
height: 500px;
border: 1px solid red;
}
.c1{
width: 200px;
height: 200px;
border: 1px solid blue;
/*margin-bottom:为负值百分数，自身无偏移值,，其后元素受影响(上移了,上移大小为父元素宽度值*20%)*/
margin-bottom: -20%;
}
.c2{
width: 200px;
height: 200px;
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="p">
<div class="c1">
子元素1
</div>
<div class="c2">
子元素2（子元素2受影响,上移了）
</div>
</div>
</body>
</html>
效果：
总结：以上是margin赋值为负值的情况，可使自身偏移（或不偏移），其后元素受影响（或不受影响），自身宽度增大（或不增大），会有多种不同的应用场景，请合理选择。
margin赋值为负值的几种效果（负值像素，负值百分数）的更多相关文章
- margin为负值的几种情况
1.margin-top为负值像素 margin-top为负值像素,偏移值相对于自身,其后元素受影响,见如下代码: 1 <!DOCTYPE html> 2 <html lang=&q ...
- XE8 for iOS 状态栏的几种效果
XE8 实现 iOS 状态栏的几种效果: 一.状态栏底色: 开一个新工程. 设定 Fill.Color 颜色属性. 设定 Fill.Kind = Solid. 无需修改任何官方源码. 二.隐藏状态栏( ...
- fakeLoader页面加载前loading演示8种效果
提高用户体验的插件fakeLoader页面加载前loading演示8种效果 在线预览 下载地址 示例代码 <div id="main"> <div class=& ...
- jQuery瀑布流从不同方向加载3种效果演示
很实用的一款插件jQuery瀑布流从不同方向加载3种效果演示在线预览 下载地址 实例代码 <section class="grid-wrap"> <ul clas ...
- jQuery Wheel 环形菜单插件5种效果演示
很酷的菜单-jQuery Wheel 环形菜单插件5种效果演示在线预览 下载地址 实例代码 <div class="container"> <!-- Top Na ...
- jQuery超酷下拉插件6种效果演示
原始的下拉框很丑啦, 给大家一款jQuery超酷下拉插件6种效果 效果预览 下载地址 实例代码 <div class="container"> <section ...
- jQuery自定义漂亮的下拉框插件8种效果演示
原始的下拉框不好看这里推荐一个jQuery自定义漂亮的下拉框插件8种效果演示 在线预览 下载地址 实例代码 <!DOCTYPE html> <html lang="en&q ...
- jQuery下拉框插件8种效果
jQuery自定义漂亮的下拉框插件8种效果 jquery美化选择器实例有:边框.下划线. 伸缩 .滑动. 覆盖. 旋转. 弹出层选择 .环形效果. 在线预览 <body class=" ...
- Javscript轮播 支持平滑和渐隐两种效果（可以只有两张图）
原文:Javscript轮播 支持平滑和渐隐两种效果(可以只有两张图) 先上两种轮播效果:渐隐和移动 效果一:渐隐 1 2 3 4 效果二:移动 1 2 3 4 接下来,我们来大致说下整个轮播的思 ...
随机推荐
- js异步任务处理方式
一.es6(es2015)之前:使用原始的callback函数,会陷入回掉地域 this.$http.jsonp('/login', (res) => { this.$http.jsonp('/ ...
- oracle sql语句怎么查询所有存储过程中是否包含某个注释？
select text from all_source where type='PROCEDDURE' and name='过程名'and instr(text,'注释内容')>0
- C#程序集系列09,程序集签名
在"C#程序集系列08,设置程序集版本"中体验了为程序集设置版本,但对于程序集的安全性来说,还远远不够.本篇体验程序集的签名. □ 程序集的签名 →F盘as文件夹下有多个文件→在程 ...
- 使用Redis实现抢购的一种思路(list队列实现）
原文:https://my.oschina.net/chinaxy/blog/1829233 抢购是如今很常见的一个应用场景,主要需要解决的问题有两个: 1 高并发对数据库产生的压力 2 竞争状态下如 ...
- 【docker】关于docker中挂载的解释
现在有这么一个命令: docker run -p 33061:3306 --name mysql --restart=always -e MYSQL_ROOT_PASSWORD=pisen -v /e ...
- C# 输入法 z
C# 输入法 虽说输入法不是什么新事物,各种语言版本都有,不过在C#不常见:这就会给人一种误会:C#不能做!其实C#能不能做呢,答案是肯定的——三种方式都行:IMM.TSF以及外挂式.IMM这种就是调 ...
- html在线编辑器汇总
1. TinyMCE 免费,开源,轻量的在线编辑器,基于 JavaScript,高度可定制,跨平台. 2. FCKEditor 免费,开源,用户量庞大的在线编辑器,有良好的社区支持. 3. YUI E ...
- sqlserver 创建用户仅仅能訪问指定视图
use crm --当前数据库创建角色 exec sp_addrole 'rapp' --分配视图权限 GRANT SELECT ON veiw TO [角色] --指定视图列表 GRANT SEL ...
- [15] 星星(Star)图形的生成算法
顶点数据的生成 bool YfBuildStarVertices ( Yreal radius, Yreal assistRadius, Yreal height, Yuint slices, YeO ...
- iOS开发-简单的图片查看器
现在你只要拿着手机,不管你Android还是iOS,新闻类的App不可避免都有一个功能就是图片查看,做个专题,查看一下内容,App Store中也有专门针对图片浏览的App,鉴于目前所知有限,无法做到 ...