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 接下来,我们来大致说下整个轮播的思 ...
随机推荐
- Syslink Control in MFC 9.0(转)
Visual Studio 2008 (formely code-named ‘Orcas’) has several important updates for VC++ and MFC. Amon ...
- maven 之dependencyManagement 和 pluginManagement
一个大中型Java项目中,一般由若干个module组成,各个module各司其职,担任整个工程中不同角色.大多数情况下,大多数module都会用到相同的jar包,或者插件.如果每个module中都引入 ...
- 取消SVN版本号控制的bash脚本
原理非常easy,递归删除当前文件夹下全部的 .svn 文件. 把 .svn 换成 .git 就可以用于删除 git 控制
- dos命令行实践
本篇体验使用dos命令行窗口实现各种操作. □ 打开dos命令行窗口 →点击电脑左下角"开始"按钮→点击"运行"→输入"cmd",按回车,来 ...
- Eclipse:引用一个项目作为类库(图文教程)
前言:项目TestRoid要引用Volley项目作为类库 步骤如下: 一:选择导入Android项目 二:选择Volley项目路径导入 三:右击Volley项目,点击Properties 四: ...
- 【docker】centOS7上部署的mysql和spring boot服务，要求，mysql的时间、java程序服务的时间和宿主机的时间完全保持一致【修改mysql时区，临时和永久】【修改spring boot配置文件时区】【修改docker启动spring boot实例程序时区】
要求:centOS7上部署的mysql和spring boot服务,要求,mysql的时间.java程序服务的时间和宿主机的时间完全保持一致: ============================ ...
- 【TYVJ 五月图论专项有奖比赛】
最短路+TSP+最小生成树+倍增LCA+TreeDP 第一题 其实是个TSP问题(然而我没发现),但是关键点很少,只有5个,所以用dij+heap分别预处理出来这五个点为源的最短路…… 然后枚举起点 ...
- go语言基础之二维数组
1.二维数组 示例: package main //必须有个main包 import "fmt" func main() { //有多少个[]就是多少维 //有多少个[]就用多少个 ...
- WebView 加载网页 加载资源 总结 MD
Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...
- 基于jQuery的Cookie操作插件--简单而又没有兼容性问题！
在网页客户端,我们经常会遇到读取或者设置cookie的情况,如果用纯生的js我们可能会遇到一些兼容性带来的麻烦,这里给大家介绍一个比较实用jquery操作cookie的插件,插件的源代码如下: 1 2 ...