Margin 负值的问题-对 margin 的top、left、right、bottom 设置负值，有何效果？

最新推荐文章于 2022-07-21 22:09:04 发布
最新推荐文章于 2022-07-21 22:09:04 发布
阅读量793 收藏 2
点赞数
分类专栏： css面试 前端面试题 文章标签： css3 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_49456900/article/details/123211359
版权

CSS 负边距 元素移动 布局 网页设计
关键词由CSDN通过智能技术生成

margin-top 和 margin-left 为负值，元素会向上、向左移动；

margin-right 为负值，右侧元素会左移，但自身不会受影响；

margin-bottom 为负值，下方元素上移，但自身不会受影响。

麦子穗
关注
专栏目录
浅谈margin负值问题
Sun_blog
06-09 4548
说到margin负值问题，很多都小伙伴都一脸懵逼。哈哈，没错说到margin大家用到的最多的还是它的正值。例如：margin-top: 20px 等等。但是margin负值的情况也十分重要，比如经典三栏布局中的圣杯布局和双飞翼布局中就应用了margin负值。那么接下来我就带大家看看什么是margin负值。 margin负值 margin负值顾名思义，就是margin属性的值为负值的情况，例如：margin-left: -20px。看到这个例子各位小伙伴们就对margin负值的情况有了初步的了解。接下来我们就
margin为负值引起的层级问题
weixin_41060844的博客
11-27 484
<div class="wrap"> <div class="A"> <img src="/a"> </div> <div class="B"></div> </div> <style> .wrap { width: 100%; height: 100%; } .A { width: 100%; height: auto; .bgImg {
margin取负值详解
weixin_42718310的博客
09-08 3149
Margin取负值 Margin-left: （1） 子集总宽度宽度不超过父级宽度时（不换行） margin-left取负值表示包含块向左移动，使包含块的左边距减去前面元素的右边距为指定负值。 实际应用情况： .wrapper { background-color: black; margin: 0 auto; width: 600px; height: 300px; } .left, ...
margin 负值引起的层级（z-index）问题
09-27
主要为大家介绍margin 负值引起的层级（z-index）问题的解决方法，需要的朋友可以参考下
margin-right负值的使用
FEE
11-30 1571
在某些布局当中，.test这个块必须包含在.main这个块中，而同时要达到如下图的效果，则可以使用margin-right负值<div class="main"> <div class="test"></div> </div>.main { background: #ccc; width: 400px; height: 200px; } .test { bac
margin赋值为负值的几种效果（负值像素，负值百分数）
weixin_34216036的博客
06-27 206
1、margin-top为负值像素 margin-top为负值像素，偏移值相对于自身，其后元素受影响，见如下代码： 1 &lt;!DOCTYPE html&gt; 2 &lt;html lang="zh"&gt; 3 &lt;head&gt; 4 &lt;meta charset="UTF-8" /&gt; 5 &lt;meta http-equiv=&q
margin负值问题
ll_0801xyz的博客
08-17 3282
margin
margin负值的理解与演示
weixin_43183219的博客
01-06 1058
margin负值的介绍以及一些简单的演示
【CSS面试题】Margin负值的问题
Milk~每天分享一点点，技术进步一点点
07-16 596
对margin 的 top left right bottom设置负值，有何效果？ margin-top和margin-left负值，元素向上、向左移动 margin-right负值，右侧元素左移，自身不受影响 例子：比如 a 元素和 b元素是左右的关系，a元素的右边是b元素，给a元素的margin-right设置-10px;自身不受影响，a元素里面的内容不受影响，但b元素会向左移动10px 3.如果margin-bottom负值，下方元素上移，自身不受影响 例子：比如 a 元素和 b元素是上下
如何理解margin重叠问题
weixin_47450807的博客
04-08 3440
一、写在前面 根据w3c规范，两个margin产生折叠的必备条件： 1、必须处于常规文档流（不能是浮动和定位）的块级盒子，并且处于同一个BFC当中。 2、没有线盒，没有空隙，没有padding和border将他们分割。 3、都处于垂直方向相邻的外边距。 二、例子 <!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compa
CSS margin 属性定义边外补白
12-11
边外补白分为四个方向：上、下、左、右，分别对应`margin-top`、`margin-bottom`、`margin-left`和`margin-right`。通过这四个属性，我们可以独立地调整各个方向上的边外补白宽度。同时，`margin`属性允许你一次性...
圣杯布局(margin-left为负值的特殊情况)
weixin_51212460的博客
07-21 378
圣杯布局
关于上部盒子里有图片下面盒子magin-top负值的层级问题
weixin_30279751的博客
06-21 236
.box{ width: 800px; box-sizing: border-box; margin: 50px auto 0; background: pink; } .imgBox{ width: 80%; height: 500px; margin: 0 auto; backgr...
IE6中margin-bottom为负值时失效
懒人改变世界
08-26 1381
为什么要用负值就不多说了，反正重复的使用
不为人知的margin负值的应用
weixin_44823731的博客
08-25 657
margin的负值的情况分为两种： margin-left、margin-top：当这两个的属性值为负值的时候，自身会根据负值的大小来向左和上方向偏移。 margin-right、margin-bottom：当这两个的属性值为负值的时候，自身的位置不会发生改变，但是会影响自己身后的元素。这两个为负值，相当于自己的宽度缩小（宽度缩小是表示自己占用的宽度变小，但是不会影响自身元素的显示。当负值到达-100%的时候，自身的就不占用宽度，如果由于宽度不够而导致的换行，就会偏移到原来的位置），导致后续的元素向自己偏移
五种定位、静态定位、相对定位、绝对定位、固定定位、粘性定位、实现元素水平垂直居中的方法
CIA的博客
07-30 504
static 默认值 静态定位，相当于没有加 relative 相对定位 参考物: 元素自己本身的位置 移动方向和移动距离： left/top/right/bottom:数值px; (和设置的方向形成距离为正，交叉为负数) absolute 绝对定位 参考物: 有(1)定位属性的(除默认的静态定位之外)(2)祖先元素 参考物特殊情况 (1) 如果要移动的元素的祖先元素很多都加了定位属性，那就参考离该元素最近的 (2) 如果祖先元素都没有加定位属性，那就参考浏览器窗口 移动方式和距离: lef
margin为负值怎么解释？
SCUhzs
10-01 3252
文章目录前言margin四值顺序margin表现margin为负值1.margin-left,margin-right为负值元素本身没有宽度元素本身有宽度2.margin-top为负值3.margin-bottom为负值 前言 margin设置为负值往往用于实现双飞翼布局、圣杯布局中。我本人对这些布局实现的原理还有点懵，故整理一下margin为负值的情况。 margin四值顺序 【1个值】margin: top|right|bottom|left; 【2个值】margin: top|bottom left
margin 负值 理论
zhuchunyan_aijia的博客
07-08 2585
当给一个元素设置margin 负值（top/left）,该元素将在该方向上产生位移 当给一个元素设置margin负值（bottom/right）,这个元素并不会像你所预想的产生位移，而是将任何紧随其后的元素“拉”过来，覆盖在自己的上边。
margin为负值的几种情况
weixin_30653023的博客
07-18 3281
1、margin-top为负值像素 margin-top为负值像素，偏移值相对于自身，其后元素受影响，见如下代码： 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta http-equiv=...
margin设置负值会是什么情况？
最新发布
07-14
1. 相邻元素重叠：如果一个元素的margin-top设置为负值，并且与上方元素的margin-bottom重叠，那么它们就会重叠在一起。这可能导致布局混乱或不符合预期。 2. 元素溢出：如果一个元素的margin设置为负值，并且超出...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值