CSS中margin常见问题解决方案

margin为CSS中非常常用的一个属性，其所包含的内容也是很多的，这里向大家描述一下CSS中margin常见问题及解决方案。

创新互联专业为企业提供临沧网站建设、临沧做网站、临沧网站设计、临沧网站制作等企业网站建设、网页设计与制作、临沧企业网站模板建站服务，10多年临沧做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

CSS 中margin属性常见问题

1.IE6下双边距问题

margin双布局可以说是IE6下经典的bug之一。产生的条件是：block元素+浮动+margin。

还记得我自认为会CSS的那个阶段，这个问题我经常碰到，会很熟练的用hack解决这个问题，当时还自以为是，洋洋得意。现在看来，当时的自己嫩的就像个豆芽菜。真正CSS厉害的人基本上是不会碰到这个bug的，如果您时不时遇到这个bug，说明您的CSS还有好一段路要走。
我的体会是越少的浮动，就会越少的代码，会有更灵活的页面，会有扩展性更强的页面。这不多说，归结为到一定水平了，浮动会用的较少。另外，您也会避免使用浮动+margin的用法。所以，越后来越不易遇到这种bug。

这里提一下解决方法，使用hack我是不推荐的，使用hack属于比初学者稍高一点的层次水平。一个页面，没有一个hack，但是各个浏览器下表现一致，这才是水平。使用display:inline;可以解决这个问题。

而为什么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代替，或者再添加一层标签等方法解决，不太难，没有多少可说的。

本文标题：CSS中margin常见问题解决方案
URL分享：http://www.gawzjz.com/qtweb2/news17/10367.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联