负margin小记

static元素 margin-top/left负值，元素向指定方向移动，
margin-bottom/right负值，元素不动，后续元素前移

float元素左浮，与static一致
右浮，margin-right/top负值，元素向指定方向移动，
margin-left/bottom负值，元素不动，后续元素前移

absolute元素与static一致

总之，右浮元素左右相反，其他元素表现一致。

时间： 2024-10-11 01:27:05

负margin小记的相关文章

负margin使用注意的一个问题

在项目实力中经常用到负margin 如: <div id="test"> <ul> <li>子元素1</li> <li>子元素2</li> <li>子元素3</li> <li>子元素4</li> <li>子元素5</li> <li>子元素6</li> </ul> </div> 是实现如图的效果:

用margin还是用padding？（3）—— 负margin实战

看过一篇文章是关于我知道你不知道的负Margin,里面对margin做了总结: 当margin四个值都为正数值的话,那么margin按照正常逻辑同周围元素产生边距.当元素margin的top和left是负值时会引起元素的向上或向左位置移动.而当元素margin的bottom和right是负值时会影响右边和下边相邻元素的参考线. 接下来就讲在实际开发中用到的几个比较常用的负margin实例: 1.bootstrap框架的栅格系统是一个亮点,它就用了负margin来完美的解决了container 和

关于负margin在页面中布局的应用

本文转载自:http://www.cnblogs.com/jscode/archive/2012/08/28/2660078.html. 今天再写一个布局的时候用到一个margin-top是负值的情况,本来不是要用负值,但突然发现负值也能达到我要的效果,随后百度了一下,才发现了大牛的好文章,转载至此,算是学习一个经验,进行记录,同样也给分享给没看到的同学. 以下是正文负数给人总是一种消极.否定.拒绝之感,不过有时利用负margin可以达到奇妙的效果,今天就表一表负值在页面布局中的应用.这里说的

利用负margin实现元素居中

原理就是对当前元素的position设置为absolute并且相对于父元素定位,先设置left:50%;top:50%使当前元素的左上角处于父元素的中心位置,之后再应用负margin特性使其中心位于父元素的中心. 负margin特性:负的margin-top,margin-left将当前元素往上/左拉,覆盖其他元素; 负的margin-bottom,margin-right将当前元素的后续元素往上/左拉,覆盖当前元素; 例如: <!DOCTYPE html> <htm> <h

负Margin

现如今,负margin技术的应用可谓越来越广,任一个大型站点惊鸿一瞥之下都会有其身影所在.个人认为负margin技术是学习css路上必不可缺少的课题之一,许多高级应用及疑难杂症修复都可以使用负margin技术进行实现. 负margin理论: 在说明什么是负margin之前,你得清楚margin是个啥么玩意,如果还不清楚可以先阅读本人的前一篇文章<不要告诉我你懂margin>,预补下知识,回头再读这篇文章,相信俩篇文章都能给你带来不少的收获. 为了形象.易懂的解释负margin,我们将引入W3C

负margin的移位参考线

同早年~ 问题描述在xx项目中,羊城通卡号的输入框处使用了xx库中的实现方式,即将提示文字标签<label>通过负margin移位到<input>框的下面.静态时展现良好,js逻辑添加后发现,输入文字时<input>框会抖动.排查后发现,是重置了<label>的负margin值引起的.这引起了我对负margin定位的兴趣,于是乎,做了个简单的测试. Demo测试初始状态: 图 (1) 灰框 {margin-bottom:-10px;}: 图 (2) 灰框

标签页-导航负margin

/* 标签页菜单 */div.bs-docs-example { position: relative; width: 600px; margin: 15px auto; padding: 39px 19px 14px; background-color: white; border: 1px solid #DDD; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;} div.bs-docs-exam

我知道你不知道的负Margin

关于盒模型的负margin

1. 负边距对由文档流控制的元素的作用是,会使它们在文档流中的位置发生偏移,但这种偏移不同于相对定位,通过相对定位偏移后,其仍然会坚守着它原来占据的空间,而通过负边距移动后的元素,其原来的空间会被后来的元素占据.注意:负margin不会使元素脱离文档流. 2. 在文档流中,元素的最终边界是由margin决定的.绝对定位的元素定义的top.right.bottom.left等值是元素自身的边界到最近的已定位的祖先元素的距离,这个元素自身的边界指的就是margin定义的边界. 3.