margin为负值的几种情况

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赋值为负值的情况,可使自身偏移(或不偏移),其后元素受影响(或不受影响),自身宽度增大(或不增大),会有多种不同的应用场景,请合理选择。

转载于:https://www.cnblogs.com/andyZhang0511/p/11209503.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/448260.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

事件EVENT,WaitForSingleObject(),WaitForMultipleObjecct()和SignalObjectAndWait() 的使用(上)

用户模式的线程同步机制效率高&#xff0c;如果需要考虑线程同步问题&#xff0c;应该首先考虑用户模式的线程同步方法。但是&#xff0c;用户模式的线程同步有限制&#xff0c;对于多个进程之间的线程同步&#xff0c;用户模式的线程同步方法无能为力。这时&#xff0c;只能考…

axios 中文文档、使用说明

以下内容全文转自 Axios 文档&#xff1a;https://www.kancloud.cn/yunye/axios/234845 ##Axios Axios 是一个基于 promise 的 HTTP 库&#xff0c;可以用在浏览器和 node.js 中。 Features 从浏览器中创建 XMLHttpRequests从 node.js 创建 http 请求支持 Promise API拦截请…

汽车熄火是什么原因?

汽车熄火是什么原因&#xff1f; 近来看见很多车主被车子熄火所困扰&#xff0c;驾校一点通帮助您从以下也许可以找出原因。 1、自动档车型&#xff1a; 自动档的车型不会轻易出现熄火的现象&#xff0c;而手动档的车型由于驾驶水平不高&#xff0c;可能会经常出现熄火的现象。…

数据库 -- 02

引擎介绍 1.什么是引擎 MySQL中的数据用各种不同的技术存储在文件&#xff08;或者内存&#xff09;中。这些技术中的每一种技术都使用不同的存储机制、索引技巧、锁定水平并且最终提供广泛的不同的功能和能力。通过选择不同的技术&…

事件EVENT,WaitForSingleObject(),WaitForMultipleObjecct()和SignalObjectAndWait() 的使用(下)

注意&#xff1a;当WaitForMultipleObjects等待多个内核对象的时候&#xff0c;如果它的bWaitAll 参数设置为false。其返回值减去WAIT_OBJECT_0 就是参数lpHandles数组的序号。如果同时有多个内核对象被触发&#xff0c;这个函数返回的只是其中序号最小的那个。 如果bWaitAll …

设置 shell 脚本中 echo 显示内容带颜色

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 shell脚本中echo显示内容带颜色显示,echo显示带颜色&#xff0c;需要使用参数 -e 格式如下&#xff1a; echo -e "\033[字背景颜…

Visual C++ 编译器选项 /MD、/ML、/MT、/LD

前段时间编译一个引用自己写的静态库的程序时老是出现链接时的多个重定义的错误&#xff0c;而自己的代码明明没有重定义这些东西&#xff0c;譬如&#xff1a; LIBCMT.lib(_file.obj) : error LNK2005: ___initstdio already defined in libc.lib(_file.obj) LIBCMT.lib(_fi…

Delphi面向对象编程的20条规则

Delphi面向对象编程的20条规则 作者简介 Marco Cantu是一个知名的Delphi专家&#xff0c;他曾出版过《精通Delphi》系列丛书&#xff0c;《Delphi开发手册》以及电子书《精通Pascal》(该电子书可在网上免费获得)。他讲授的课题是Delphi基础和高级开发技巧。你可以通过他…

制动失灵怎么办?

定义 制动过程中&#xff0c;由于制动器某些零部件的损坏或发生故障&#xff0c;使运动部件(或运动机械)不能保持停止状态或不能按要求停止运动的现象。 制动失灵的原因 制动失灵的关键在于制动系统无法对汽车施加足够的制动力&#xff0c;包括制动液管路液位不足或进入空气、制…

OpenDDS用idl生成自定义数据类型时遇到的一个问题

问题&#xff1a;这里会提示LNK2005重复定义的错误 解决方案&#xff1a; 解决后&#xff1a;

解决:Connect to xx.xx.xxx.xx :8081 [/xx.xx.xx.xx] failed: Connection refu sed: connect -> [H

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 1. 自行启动了个 Nenux 服务。想把本地工程推送到 个人私服&#xff0c;执行命令&#xff1a;mvn deploy 报错&#xff1a; Failed to…

ADOQuery 查询 删除 修改 插入

//利用combobox组件查询数据库表procedure TForm1.Button1Click(Sender: TObject);beginADOQuery1.Close;ADOQuery1.SQL.Clear;ADOQuery1.SQL.Add(select * from trim(ComboBox2.Text));ADOQuery1.Active:true;end&#xff1b; //查询记录procedure TForm1.Button1Click(Sender…

防爆胎,有妙招

对于大多数人来说&#xff0c;买车难,养车更难。许多人拥有了新车&#xff0c;却没有足够的知识去好好保养汽车&#xff0c;这实在是非常可惜。如何做好汽车的保养工作,让我们的爱车更好的为我们工作&#xff1f;夏天炽热的天气&#xff0c;是否让你为爆胎烦恼不已&#xff1f;…

Qt之QProcess(一)运行cmd命令

Qt提供了QProcess类&#xff0c;QProcess可用于完毕启动外部程序&#xff0c;并与之交互通信。 一、启动外部程序的两种方式&#xff1a; &#xff08;1&#xff09;一体式&#xff1a;void QProcess::start(const QString & program, const QStringList & arguments…

Docker 方式安装 Nexus 私服

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 1. 从Docker 官方仓库查找镜像&#xff1a; docker search nexus 2. 拉取镜像&#xff1a; docker pull 你选中的镜像的名字  pull…

shader飞线改进版

项目github地址&#xff1a;https://github.com/ecojust/flyline 前面写过一个飞线(基于THREE.Line进行的颜色变化)&#xff0c;只是简单地将可视区片元颜色的alpha通道值设为1.0&#xff0c;不在可视区的设为0.0。效果是这样的&#xff1a; 做得很粗糙&#xff0c;而且因为线是…

转向盘失控怎么办?

定义 转向失控就是方向盘不管用了&#xff0c;打方向盘&#xff0c;但是前轮不动&#xff0c;不受方向盘控制。 转向失控的原因 转向失控可能因为车辆过快、酒驾、疲劳、车况不佳、雨雪路滑等&#xff0c;还有转向机构中有零部件脱落、损坏、卡滞时&#xff0c;也会使转向机构突…

Socket网络编程【获取本机IP】

//12.3.2//运行环境VS2013//获取本地IP #include <stdio.h> #include <winsock2.h> #pragma comment(lib,"ws2_32.lib")void main() { // 调用WSAStarup初始化WINsock库 WSADATA wsaData; ::WSAStartup( MAKEWORD(2,2), &wsaData);// 存放主机名的…

onresize

1 window.onresize function (ev) { 2 console.log(尺寸发生改变&#xff01;); 3 }; 4 5 window.addEventListener(resize, function (ev) { 6 console.log(尺寸发生改变&#xff01;); 7 }); 1 /*2 当屏幕的宽度>960时&#xff0c;页面的背景颜色为红色…

Vuejs:组件 slot 内容分发

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 本文是在官方文档的基础上&#xff0c;更加细致的说明&#xff0c;代码更多更全。 简单来说&#xff0c;更适合新手阅读 &#xff08;…