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 接下来,我们来大致说下整个轮播的思 ...
随机推荐
- CentOS 7提示：ERROR unsupported format character '(0xffffffe7) at/域安装失败，您可以运行下列命令重启您的域：
别理会,直接装即可,这个错误不影响使用.
- android 内部存储 安装apk
在做应用自动更新模块下载apk时遇到了内部存储和sd卡存储两种情况,存在sk卡中存储apk可以正常安装,可是在内部存储中安装apk时出现了parse error的问题. 在网上搜了搜,大致分为两种方案 ...
- Android中播放本地SD卡中歌曲须要的加入的权限
使用MediaPlayer播放本地Mp3文件时.须要注意的訪问路径的问题以及訪问权限的问题. 1.訪问路径:/storage/emulated/0 此路径即为手机的根路径,能够通过下载ES文件浏览器软 ...
- 使用Html.EditorFor()为文本框加上maxlength,placeholder等属性
当想通过Html.EditorFor()给文本框加上maxlength,placeholder等属性的时候,发现Html.EditorFor()没有提供可直接加上这些属性的重载方法,如何做到呢? □ ...
- C语言内存分析
C语言内存分析 一.进制 概念:进制是一种计数方式,是数值的表现形式 4种主要的进制: ①. 十进制:0~9 ②. 二进制:0和1 ③. 八进制:0~7 ④. 十六进制:0~9+a b c d e f ...
- Ext.QuickTips.init()的使用
在extJS的例子中,大部分都在程序第一行使用了如下语句:Ext.QuickTips.init();但是QuickTips的用处是什么呢?我们看一段最简单的代码: <html> <h ...
- 【docker】 docker容器内部安装vi命令
有时会需要在docker容器内使用vi命令,但是新启动的docker容器内并没有vi命令,那就需要自己安装一个 1.使用命令 apt-get update 2.进行安装 apt-get install ...
- python测试开发django-9.使用navicat连接mysql
前言 navicat 是一个连接数据库的可视化工具,可以连接mysql和oracle做一些简单增删改查,对于初学者来说非常方便的 navicat安装 navicat版本比较多,分享一个我经常用的版本 ...
- 【BZOJ】【2200】【USACO 2011 Jan】道路和航线
做了一天…… TLE:数组开小了-_-#道路是有50000的,双向要乘二.(我特么怎么想的就以为是树了……) WA:一些大点都WA了,小点都过了.好纠结…… AC了QAQ,不知道为什么,在并查集合并的 ...
- go语言基础之指针做函数参数用地址传递
1.指针做函数参数 示例: package main //必须有个main包 import "fmt" func swap(p1, p2 *int) { *p1, *p2 = *p ...