最具价值web全栈课程
只做前端开发培训的好学校，专注于多方向全栈工程师培养。前端名师邵山欢亲自授课，课程涵盖HTML5、CSS3、Node.js、Angular、React诸多课程，免费视频广受学生好评。
跟牛人学前端
跟牛人学前端
妙味大前端自学宝典
妙味课堂2016年JavaScript课程大纲震撼升级、全栈来袭！
前端最新干货
前端最新干货
学前端，免费
爱创课堂由前百度工程师，《javaScript设计模式》张容铭老师创立，公司秉承纯干货，不忽悠的态度专注前端培训，让每个零基础的学员都能真正的从入门到精通。爱创课堂北京最具深度和口碑的JavaScript、HTML5培训，前端培训，专注于让学员获得快乐的学习体验并找到高薪工作的培训——数百名毕业学员高薪就职大型互联网公司.
CSS3参考手册
CSS3参考手册 - 最新最全的CSS参考手册，CSS3属性集合，CSS3 Properties, CSS3, CSS3手册, CSS3参考手册
您的位置： » 分类:
» 文章: margin叠加的问题
由于margin在浏览器中的BUG很多，有人强烈推荐尽量不要使用margin，而用padding！我很奇怪，我们在前端开发的时候，虽然他们很多时候可以随便用什么，但是很多时候我们不得不用margin。绝大多数的margin引起的BUG是可以解决。
今天有人问我一个margin叠加的问题。有些人喜欢把margin叠加归纳到BUG中去，有些却不这么认为，他们的理由是Firefox也有这个问题，所以不能叫bug。呵呵好像有点牵强。其实大家只要看看，w3c认为margin叠加是合理的。不管是不是bug，但是这个问题真的存在。看下面这个例子：
[code=”html”]
margin: 20px auto
margin: 20px auto
margin: 20px auto
margin: 20px auto
margin: 50px auto
解决这个问题的方法有不少，先来看看这个，在外层的容器中加：overflow:zoom:1；
[code=”html”]
这里两个还是存在叠加margin: 20px auto
这里两个还是存在叠加margin: 20px auto
margin: 20px auto
margin: 20px auto
margin: 50px auto
还有外层的容器中加边框属性，在叠加元素加空块状元素等等。。还有就是用padding来取代margin。这里就不说了。
 正文完。下面还有一个推广让最好的人才遇见更好的机会！
互联网行业的年轻人，他们面对着怎样的职业瓶颈、困惑与未来选择？过去，这鲜有人关心。资深的职场人，也多半优先选择熟人去推荐机会。
100offer致力于改变现状，帮互联网行业最好的人才发现更好的机会。使用
或 100offer App ，可以一周内获得中国、美国等数千家优质企业的工作机会。
 推广结束 
关注WEB前端开发官方公众号
关注国内外最新最好的前端开发技术干货，获取最新前端开发资讯，致力于打造高质量的前端技术分享公众号
所属分类：
您可能感兴趣的文章
近期最热文章
- 6,789 - 3,447 - 2,806 - 2,630 - 2,231 - 336西西软件园多重安全检测下载网站、值得信赖的软件下载站！
→ CSS框模型中外边距(margin)折叠图文详解
最近做了个项目，居然在一个小小的css问题上折腾了很久很是纠结――外边距折叠的问题。今天难得清闲，就把这个问题研究了一下，才发现大有学问，所以写篇博文整理一下，以便更加牢记！　　外边距折叠，指的是毗邻的两个或多个外边距 (margin) 在垂直方向会合并成一个外边距。　　触发条件：&毗邻，没有被非空内容、padding、border&或&clear&分隔开的margin特性.&非空内容就是说这元素之间要么是兄弟关系或者父子关系&这些 margin 都处于普通流中，即非浮动元素，非定位元素　　垂直方向外边距合并的计算　　1) 参加折叠的margin都是正值：取其中 margin 较大的值为最终 margin 值。&div style=&height:50 margin-bottom:50 width:50 background-color:&&A&/div&
&div style=&height:50 margin-top:100 width:50 background-color:&&B&/div&　　示意图：　　　　　　　　 2). 参与折叠的 margin 都是负值：取的是其中绝对值较大的，然后，从 0 位置，负向位移。&div style=&height:100 margin-bottom:-75 width:100 background-color:&&A&/div&
&div style=&height:100 margin-top:-50 margin-left:50 width:100 background-color:&&B&/div&　　示意图：　　　　　　　　　3). 参与折叠的 margin 中有正值，有负值：先取出负 margin 中绝对值中最大的，然后，和正 margin 值中最大的 margin 相加。&div style=&height:50 margin-bottom:-50 width:50 background-color:&&A&/div&
&div style=&height:50 margin-top:100 width:50 background-color:&&B&/div&　　&示意图：　　　　　　　　4). 相邻的 margin 要一起参与计算，不得分步计算　　要注意，相邻的元素不一定非要是兄弟节点，父子节点也可以，即使不是兄弟父子节点也可以相邻。　　而且，在计算时，相邻的 margin 要一起参与计算，不得分步计算。&div style=&margin:50px 0; background-color: width:50&&&&& &div style=&margin:-60px 0;&&&&&&&&&&&& &div style=&margin:150px 0;&&A&/div&&&& &/div&&/div&&div style=&margin:-100px 0; background-color: width:50&&&&& &div style=&margin:-120px 0;&&&&&&&&&&&& &div style=&margin:200px 0;&&B&/div&&&& &/div&&/div&　　错误的计算方式：算 A 和 B 之间的 margin，分别算 A 和其父元素的折叠，然后与其父元素的父元素的折叠，这个值算出来之后，应该是 90px。依此法算出 B 的为 80px；然后，A和B折叠，margin 为 90px。　　请注意，多个 margin 相邻折叠成一个 margin，所以计算的时候，应该取所有相关的值一起计算，而不能分开分步来算。　　以上例子中，A 和 B 之间的 margin 折叠产生的 margin，是6个相邻 margin 折叠的结果。将其 margin 值分为两组：　　正值：50px，150px，200px　　负值：-60px，-100px，-120px　　根据有正有负时的计算规则，正值的最大值为 200px，负值中绝对值最大的是 -120px，所以，最终折叠后的 margin 应该是 200 + (-120) = 80px。　　　　5).&浮动元素、inline-block 元素、绝对定位元素的 margin 不会和垂直方向上其他元素的 margin 折叠&div style=&margin-bottom:50 width:50 height:50 background-color:&&A&/div&
&div style=&margin-top:50 width:100 height:100 background-color: float:&&
&div style=&margin-top:50 background-color:&&B&/div&
&/div&　　示意图：　　　　　　　　6). 创建了块级格式化上下文1的元素，不和它的子元素发生 margin 折叠　　以 “overflow : hidden” 的元素为例：&div style=&margin-top:50 width:100 height:100 background-color: overflow:&&
&div style=&margin-top:50 background-color:&&B&/div&
&/div&　　若 B 和它的 &overflow:hidden& 包含块发生 margin 折叠的话，金色的条应该位于绿色块的最上方，否则，没有发生。　　示意图：　　　　　　7).&元素自身的 margin-bottom 和 margin-top 相邻时也会折叠　　自身 margin-bottom 和 margin-top 相邻，只能是自身内容为空，垂直方向上 border、padding 为 0。&div style=&border:1 width:100&&
&div style=&margin-top: 100margin-bottom: 50&&&/div&
&/div&　　以上代码运行后，我们讲得到的是红色边框的正方形，方框的宽高都应该是 100px，高度不应该是 150px。　　示意图：　　　　
08-2107-1904-2804-2804-2804-2804-2804-2804-2603-17
阅读本文后您有什么感想? 已有23人给出评价!
名称大小下载实例演示div+css的绝对定位和相对定位布局_XHTML标准_前端技术
您的位置： &
& 详细内容
概要：本文主要描述XHTML中相对定位和绝对定位各自的本质、用法、区别和两者之间的关系。以及使用CSS的Left、Right、Top、Bottom属性（偏移属性）和Margin属性（外边距）对定位块级元素进行布局的方法。(本文的示例，请看)
说明：占位空间：元素在文档流中所占据的空间。物理空间：元素本身所占据的空间。
下面分3种情况分别对相对定位和绝对定位进行讨论：1.只使用css第一组属性布局定位元素的情况2.只使用css第二组属性布局定位元素的情况3.混合使用第一组和第二组属性的情况
图1为未定位时的初始效果，层级关系为：&div&&&div box1&&&div box2&&&div box3效果图：图1
一、用相对定位布局块级元素元素设置position值： position:relative此属性值的设置，元素没有脱离文档流，还是普通流定位模型的一部分，会对文档流中其它元素布局产生影响。（说明：蓝色代表占位空间，红色代表元素）
1.仅使用left、right、top和bottom属性布局相对定位元素的情况元素原本所占的占位空间仍保留，物理空间偏移。
图2中，设置元素的left和top的值，对box2进行布局，可以发现除了box2偏移之外，其他块级元素的位置没有被影响，可见box2的占位空间还是存在的。层级关系为：&div&&&div box1&&&div box2 ――C position: top:-60 left:80&&&div box3效果图：图2
2.仅使用margin属性布局相对定位元素的情况用margin-bottom属性和margin-top属性设置负值可以改变文档流中所占空间的高度，会影响文档流中的其它元素位置。例如：margin-top:负值; margin-bottom:负值
图3中，box1和box2都设置了元素margin-bottom的值，值等于它们高度的负值。box1和box2物理空间没有改变，占位空间高度为0。box3的margin-bottom值设置为0，物理空间没有改变，占位空间高度不变。再通过margin-left对box2和box3设置左偏移值。层级关系为：&div&&&div box1 ――C position: margin-bottom:-102&&&div box2 ――C position: margin-bottom:-102 margin-left:110&&&div box3 ――C position: margin-bottom:0 margin-left:220效果图：图3
3.混合使用left、right、top和bottom属性与margin属性布局相对定位元素的情况此情况，它们的值会产生累加的效果。在CSS2.1中所有的浏览器都使用外边距边界来完成 偏移计算。本文从数学的角度理解为偏移属性值和外边距属性值累加。
图4中，box2是在图3的基础上增加设置left的值产生的效果，可见margin-left的值和left的值产生了累加。(偏移量:80px = 110px - 30px)层级关系为：&div&&&div box1 ――- position: margin-bottom:-102&&&div box2 ――- position: margin-bottom:-102margin-left:110 flet:-30&&&div box3 ――- position: margin-bottom:0 margin-left:220效果图：图4
二、用绝对定位布局块级元素设置position值：position:此属性值的设置，元素从文档流完全删除。
1.仅使用left、right、top和bottom属性布局绝对定位元素的情况绝对定位的元素的偏移位置以最近的定位(包括相对定位和绝对定位)祖先元素作参照物。如果元素没有已定位(包括相对定位和绝对定位)的祖先元素，那么它的参照物为最顶级元素（由于浏览器的默认参照物不同，物可能是BODY或 HTML 元素）。注意：IE下参照物需设置宽度或高度bottom和right属性才可以正确的定位。
设置元素为绝对定位元素后，元素的Left、 Right、Top和Bottom属性默认值不是0，只是将元素脱离文档流。以下例子说明这个问题。在图5中，将橘黄色的祖先元素设置为定位元素（即参照物），box2设为绝对定位，文档流由box1-box2-box3变为box1-box3，可box2却没有移动到距离参照物0值的位置上，可见box2的Left、 Right、Top和Bottom属性默认值不等于0，它只是脱离了文档流而已。层级关系为：&div ―――――――――――position:relative 参照物&&&div―――――――――-没有设置为定位元素，不是参照物&&&&&div―――――――-没有设置为定位元素，不是参照物&&&&&&&div box1&&&&&&&div box2 ――Cabsolute&&&&&&&div box3效果图：图5
以最近的祖先定位元素为参照物的情况图6中，Box2设置成绝对定位元素，脱离了文档流，文档流由box1-box2-box3变为box1-box3，box2以最近的定位祖先（蓝色框）为参照物。层级关系为：&div ――――――――――― position: 不是最近的祖先定位元素，不是参照物&&&div―――――――――-没有设置为定位元素，不是参照物&&&&&div―――――――- position:relative 参照物&&&&&&&div box1&&&&&&&div box2 ――Cposition: top:50 left:120&&&&&&&div box3效果图：图6
图7中，为改变参照物（橘色框）后的效果层级关系为：&div ――――――――――― position:最近的祖先定位元素，参照物&&&div―――――――――-没有设置为定位元素，不是参照物&&&&&div―――――――-没有设置为定位元素，不是参照物&&&&&&&div box1&&&&&&&div box2 ――Cposition: top:50 left:120&&&&&&&div box3效果图：图7
图8中，参照物为最顶级的元素情况。层级关系为：&div ―――――――――――没有设置为定位元素，不是参照物&&&div―――――――――-没有设置为定位元素，不是参照物&&&&&div―――――――-没有设置为定位元素，不是参照物&&&&&&&div box1&&&&&&&div box2 ――Cposition: top:50 left:120&&&&&&&div box3效果图：图8
2.仅使用margin属性布局绝对定位元素的情况此情况，margin-bottom 和margin-right的值不再对文档流中的元素产生影响，因为该元素已经脱离了文档流。另外，不管它的祖先元素有没有定位，都是以文档流中原来所在的位置上偏移参照物。
图9中，使用margin属性布局相对定位元素。层级关系为：&div ――――――――――― position: 不是参照物&&&div―――――――――-没有设置为定位元素，不是参照物&&&&&div―――――――-没有设置为定位元素，不是参照物&&&&&&&div box1&&&&&&&div box2 ――Cposition: margin-top:50 margin-left:120&&&&&&&div box3效果图：图9
IE6的情况下，box2前面没有兄弟节点，则margin-left的值会出现双倍边距，见图10。层级关系为：&div ――――――――――― position: 不是参照物&&&div―――――――――-没有设置为定位元素，不是参照物&&&&&div―――――――-没有设置为定位元素，不是参照物&&&&&&&div box1&&&&&&&div box2 ――Cposition: margin-top:50 margin-left:60&&&&&&&div box3效果图：图10
3.混合使用left、right、top和bottom属性与margin属性布局相对定位元素的情况a.margin属性和top、bottom、left、right属性同时使用，如果同一方向偏移，它们的值会产生累加的效果，见图11。例如：margin-left:120 left:-20 那么box2的偏移值为120px-20px=100层级关系为：&div ―――――――――――-不是参照物&&&div―――――――――C不是参照物&&&&&div―――――――Cposition: 参照物&&&&&&&div box1&&&&&&&div box2 ―――position: margin-left:120 left:-20 top:50&&&&&&&div box3效果图：图11
b.绝对定位和相对定位的累加加效果不同，如果top、bottom、left、right属性和margin属性偏移的方向相反，top、bottom、left、right属性值有效，反方向的margin属性值无效，见图12。层级关系为：&div ―――――――――――-不是参照物&&&div―――――――――C不是参照物&&&&&div―――――――Cposition: 参照物&&&&&&&div box1&&&&&&&div box2 ―――position: margin-left:120 right:10 top:50&&&&&&&div box3效果图：图12
相对定位的元素不会脱离文档流，占用文档流的空间，L R Top和Bottom属性与margin属性混合使用会产生累加效果。
绝对定位的元素脱离文档流，偏移不影响文档流中的其它元素，L R Top和Bottom属性与margin属性混合使用，偏移方向相同值累加，方向相反，margin属性值无效。
绝对定位的元素以最近的定位祖先元素为参照物。
( 13:35:59)
( 12:09:00)
( 01:35:00)
( 19:38:00)
相关排行总榜您所在的位置： &
CSS中margin常见问题解决方案
CSS中margin常见问题解决方案
本文向大家介绍一下CSS中margin常见问题及解决方案，常见的问题主要包括IE6下双边距问题，margin重叠的问题，以及margin不起作用的情况等。
margin为CSS中非常常用的一个属性，其所包含的内容也是很多的，这里向大家描述一下CSS中margin常见问题及解决方案。
CSS 中margin属性常见问题
1.IE6下双边距问题
margin双布局可以说是IE6下经典的bug之一。产生的条件是：block元素+浮动+margin。
还记得我自认为会CSS的那个阶段，这个问题我经常碰到，会很熟练的用hack解决这个问题，当时还自以为是，洋洋得意。现在看来，当时的自己嫩的就像个豆芽菜。真正CSS厉害的人基本上是不会碰到这个bug的，如果您时不时遇到这个bug，说明您的CSS还有好一段路要走。
我的体会是越少的浮动，就会越少的代码，会有更灵活的页面，会有扩展性更强的页面。这不多说，归结为到一定水平了，浮动会用的较少。另外，您也会避免使用浮动+margin的用法。所以，越后来越不易遇到这种bug。
这里提一下解决方法，使用hack我是不推荐的，使用hack属于比初学者稍高一点的层次水平。一个页面，没有一个hack，但是各个浏览器下表现一致，这才是水平。使用display:可以解决这个问题。
而为什么display:inline可以解决这个双边距bug，首先是inline元素或inline-block元素是不存在双边距问题的。然后，float:left等浮动属性可以让inline元素haslayout，会让inline元素表现得跟inline-block元素的特性一样，支持高宽，垂直margin和padding等，所以divclass的所有样式可以用在这个displayinline的元素上。
如果您是IE6浏览器，可以狠狠地点击这里进入demo实例页面了解更多信息
2.margin重叠的问题
CSS2.0规范对margin重叠有如下的描述：
1.水平边距永远不会重合。
2.垂直边距可能在特定的框之间重合：
◆常规流向中两个或多个块框相邻的垂直边距会重合。结果的边距宽度是相邻边距宽度中较大的值。如果出现负边距，则在最大的正边距中减去绝对值最大的负边距。如果没有正边距，则从零中减去绝对值最大的负边距。
◆在一个浮动框和其它框之间的垂直边距不重合。//这句话是不够严谨，在IE浏览器下确实如此，但是Firefox等浏览器下依旧重合。
◆&绝对定位的框&与&相对定位的框&边距不重合。//这句话有待斟酌，我在Firefox等浏览器下测试，效果貌似很糟糕的。
margin重叠的问题其实并不是经常遇到，有时即使遇到造成的影响也很小，或是通过其他一些修改就可以轻松解决这个问题了。我也是今天才好好的研究了下margin重叠的问题，当重叠较多时，没有找到什么好的方法解决这个问题，要不IE浏览器依旧顽固不化，要么Firefox表现差强人意。可以自己后来又一想，既然知道会发生margin重叠，写代码的时候势必会注意的，也就不会出现这些重叠的问题的，所以绞尽脑汁想一个比较完美的解决方法是没有必要的。最好的解决margin重叠问题的方法就是了解它，避免它。
每枚硬币都有正反面，其实margin重叠也是又它的用处的。当垂直方向上有多个模块时，margin重叠正好可以让上中下都有一个margin值，而且由于margin重叠，所以margin值的表现都是一样的。例如a,b,c三个垂直方向上的模块都有margin:10px0;则最后的表现结果是（如果其上下没有浮动元素干扰的话）：上，中上，中下，下四处有10像素的间距。正好完美定位。
关于margin重叠，我写了个demo实例页面，您可以狠狠地单击这里获取更多有用的些信息，包括些解决重叠问题的方法等。
3.margin不起作用的情况
margin不起作用多出现在Firefox浏览器下，最常见的原因就是浮动影响，还是就是margin重叠，或者是padding与margin的重叠。关于这个，我就指说这么多了。因为margin不起作用，可以使用padding代替，或者再添加一层标签等方法解决，不太难，没有多少可说的。
【编辑推荐】
【责任编辑： TEL：（010）】
关于&&的更多文章
IE浏览器不支持很多CSS属性是出了名的，即便在支持的部分中，也
随着云计算、物联网、大数据、移动互联网的大发展，你应该知道这些。
9月的工作日被法定假日拆的零零散散，不知道各位的工
总结一下Java I/O文件读写基本类相关知识和概念。对于
今天是被国际上众多科技公司和软件企业承认的业内人士
本书依据最新版《网络管理员考试大纲》的考核要求，深入研究了历年网络管理员考试试题的命题风格和试题结构，对考查的知识点进行
51CTO旗下网站