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对象与PHP对象的对比
一.对象的创建与访问 1.JS对象的创建与访问 //方式一(通过内置构造函数创建后添加属性) var obj = new Object(); obj.name = 'Lucy'; //通过点添加属性 ...
- java多线程实现主线程等待子线程执行完问题
本文介绍两种主线程等待子线程的实现方式,以5个子线程来说明: 1.使用Thread的join()方法,join()方法会阻塞主线程继续向下执行. 2.使用Java.util.concurrent中的C ...
- 用Redis实现分布式锁以及redission使用
原文:https://my.oschina.net/wangnian/blog/668830 前言:分布式环境有很多问题,比如你前一个请求访问的是服务器A,第二个请求访问到了服务器B,就会发生并发重复 ...
- js 设置焦点 判断控件是否获得焦点 判断哪个控件获得焦点
设置焦点 <html> <head> <title>设置焦点</title> <mce:script language ="javasc ...
- RESTful学习文档
视频讲解 http://www.tudou.com/programs/view/PaVOGeK_BOY/ 文档说明 http://www.csdn.net/article/2013-06-13/281 ...
- 经典数独游戏+数独求解器—纯C语言实现
"心常乐数独小游戏"(下面简称"本软件")是一款windows平台下的数独游戏软件. 本软件是开源.免费软件. 本软件使用纯C语言编写,MinGW编译,NSIS ...
- Spark从HDFS上读取JSON数据
代码如下: import org.apache.spark.sql.Row; import org.apache.spark.SparkConf; import org.apache.spark.ap ...
- WhyDemo: 画线圈LineFlower
画线圈LineFlower 刚发过画线圈的屏保程序,现在发一下它的可编辑版本.可以对线圈的相关参数进行设置. 小时候玩过一种画线圈的玩具,将一个圆形齿轮在一个大圈里转,会画出各种图形来.这个 ...
- 深入C++的new
new”是C++的一个关键字,同时也是操作符.关于new的话题非常多,因为它确实比较复杂,也非常神秘,下面我将把我了解到的与new有关的内容做一个总结. new的过程 当我们使用关键字new在堆上动态 ...
- 访问者模式讨论篇：java的动态绑定与双分派
java的动态绑定 所谓的动态绑定就是指程执行期间(而不是在编译期间)判断所引用对象的实际类型,根据其实际的类型调用其相应的方法.java继承体系中的覆盖就是动态绑定的,看一下如下的代码: class ...