margin为负值的应用

最新推荐文章于 2020-12-08 17:01:01 发布

Johnsno

最新推荐文章于 2020-12-08 17:01:01 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/u012148262/article/details/79139731

一、对自身的影响

当元素没有width或width为auto的时候，设置负值会让增加其自身宽度。

注意：

margin-right也会增加宽度。

margin-top为负值不会增加高度，只会产生向上位移。
margin-bottom为负值不会产生位移，会减少自身的供css读取的高度，显示正常。

二、对文档流的影响

不会破坏文档流，后面的元素会紧贴补位。

三、浮动元素的影响

可以直接改变浮动元素的位置。是双飞翼、圣杯布局（左右固定、中间自适应）的基础。

三个向左float的div，第一个满了一行，第二个margin全负（margin-left=-width）的时候，就会回到第一行显示。

四、对绝对定位的影响

一样。

五、双飞翼布局

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Johnsno

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

margin负值在页面布局中有哪些应用？

IT修真院：初学者转行到互联网的聚集地

05-14

1062

这里是修真院web小课堂，每篇分享文从【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】八个方面深度解web知识/技能，本篇分享的是：【 margin负值在页面布局中有哪些应用？】 CSS盒模型中，margin是我们非常熟悉的一个属性，大多数情况下，我们采用的都是正数的 margin 值，可能有时候会用到负的 margin 值。在我们...

简单谈谈margin负值的作用

10-20

我们在CSS中都会使用margin，但将margin设置成负数，那可能就不大好处理了，margin负值并非hack，margin负值遵循文档流；假如使用margin负值促使一个元素向上位移，那么相关元素也会随之发生位移；margin负值能良好兼容各浏览器。

参与评论您还未登录，请先登录后发表或查看评论

margin负值5种应用

kopolwu的专栏

02-06

944

http://fed.renren.com/archives/517 最近做的项目中经常会用到margin的负值，这里就总结一下关于margin负值的5种使用及相关bug的解决。 1. 在流动性布局中的应用　　如WordPress的两栏式不固定布局就是使用margin负值来实现的定位，属于左右margin负值在流动性布局中的应用。　　左侧宽度固定　宽

margin负值的应用

weixin_39147099的博客

08-28

234

一、圣杯布局和双飞翼布局双飞翼布局 &amp;amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;lt;html lang=&amp;amp;amp;amp;quot;en&amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;gt; &a

转载：margin负值的应用

qq_42372534的博客

12-20

673

两头固定，中间自适应的布局，可以利用margin的负值来调整浮动元素的位置来实现。结构如下： <div class="main"> <div class="content">我是内容</div> </div> <div class="fl">zuo</div> <div class="fr"&gt......

margin负值的理解和应用

weixin_33881050的博客

02-05

166

1. 水平垂直居中利用margin负值可以实现元素的水平垂直居中 html代码： <div class="box"> <div class="out"> <div class="content">水平垂直居中</div> </div> </div&gt...

margin负值之美

04-17

而“margin负值之美”这个主题则深入探讨了如何巧妙利用负值`margin`来实现一些特殊的布局效果和设计创新。在本文中，我们将详细讨论`margin`负值的概念、用途以及它在实际项目中的应用。首先，理解`margin`的基本...

CSS中的边界margin的取值为负值说明

09-25

让我们深入探讨一下CSS中margin负值的应用及其原理。首先，理解margin的基本概念。在CSS中，margin是元素周围的空间，它分为上、下、左、右四个方向。默认情况下，margin设置为正值会使元素与其相邻元素之间产生...

margin 负值引起的层级（z-index）问题

09-27

然而，在使用margin负值时，可能会影响到元素的层级，导致原本预期的布局效果未能实现。首先，需要了解的是，当一个元素设置了position属性为非static（如relative、absolute、fixed等）时，该元素才会生成层叠上...

margin-top负值解决label 文字与input 垂直居中对齐问题

09-28

在这种情况下，利用CSS的`margin-top`负值属性可以有效地解决这个问题。首先，让我们理解`<label>`和`<input>`的基本用法。`<label>`元素用于定义一个表单控件（如`<input>`）的标签，通过`for`属性将标签关联到...

margin负值的作用

01-31

118

1.有俩个边框，有不同的背景色，不管哪边高增加，另一边也变高 2、实现自适应转载于:https://www.cnblogs.com/zhaobao1830/p/6358947.html

css - margin 负值应用

安

09-07

558

margin 负值实现两端对齐 margin-bottom 负值实现等高效果双飞翼布局负边距实现水平垂直居中效果去除列表最后一个 li 元素的 border-bottom理解这里的 margin-bottom -1px 并不会改变liborder-bottom 消失只是说原本每个li占据的高度变小了1px使得整体变得更加紧凑然后 ul 的边框正好覆盖掉了最后一个 li的 border-bott

[深入]margin负值的应用

qq_41389092的博客

12-08

331

margin负值的应用原理显示来看看margin负值的原理。 margin的负值和四条参考线有关，这四条分为两类：一类是top和left，他们的负值以内容边即border或上面/左边兄弟元素的margin下边作为参考一类是bottom和right，他们的负值是以元素本身的border的下面/右边作为参考。下面来看一些例子例子???? 原本的html和css，以及输出时的样子 <!DOCTYPE html> <html lang="en"> <head&g

margin 负值在页面布局中有哪些应用？

IT修真院：初学者转行到互联网的聚集地

05-21

446

大家好，这里是修真院前端小课堂，今天给大家分享的是《margin 负值在页面布局中有哪些应用？》 CSS 盒模型中，margin 是我们非常熟悉的一个属性，大多数情况下，我们采用的都是正数的 margin 值，可能有时候会用到负的 margin 值。在我们的印象中，负的 margin 值就类似于浏览器的 hack 一样，不被人接受。但是，本文要说明的就是，负的 margin 值并不是 h...

【css】负值margin的应用

richest_qi的博客

06-23

307

<body> <span id='s0' class='s'>hello world hello world</span><span>have a nice day</span><br><br> <span id='s1' class='s'>hello world hello world</span><span>have a nice day</span><br>

css margin的相关属性，问题及应用

渐行渐近

05-15

1898

用float时发现margin不起作用，图片和文字并排时老是不能对齐，于是搜到了这篇文章。 -------------------------------------------------------------------------------------------------------------------- 原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.

margin负值的使用详解(用负值实现压线效果)

dwjdj的博客

01-31

597

margin负值基本应用 1.同级标签应用下margin负值对同级标签应用下margin负值时，会出现标签重叠的效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <sty...

【布局技巧】margin负值的运用

独特的懒人

08-14

517

使用场景: 像淘宝一样放在一个产品上的时候盒子会显示一个紫色的框子，但是当我们给所有的盒子边框，且浮动的时候。两个边框就会重叠，颜色就会很深，这里就给整个盒子margin-left:-1px <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s

CSS margin负值学习及实际应用

04-08

227

前言 margin属性在实际中非常常用，也是平时踩坑较多的地方。margin折叠部分相信不少人都因为这样那样的原因中过招。margin负值也是很常用的功能，很多特殊的布局方法都依赖于它。表现虽然margin可以应用到所有元素，但display属性不同时，表现也不同【1】block元素可以使用四个方向的margin值【2】inline元素使用上下方向的margin值无效【3】in...

margin可以取负值吗