margin的问题

最新推荐文章于 2023-11-23 12:13:31 发布

张运领

最新推荐文章于 2023-11-23 12:13:31 发布

阅读量3.3k

点赞数 3

分类专栏： css 文章标签： margin css 元素居中 magin兼容

本文链接：https://blog.csdn.net/zyl_lyr1019/article/details/14215355

版权

css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

CSS中最重要的概念可以分为三个：浮动，定位，盒模型。
先看下什么是盒模型

盒模型由内容(width,height)，内边距(padding)，边框(border)，外边距(margin)组成。

下面就来看看盒模型中的外边距吧

margin的用法等基本就不多说了，只说一下利用margin实现的一些效果。

1:利用margin实现居中：
一种方法是使用margin:0 auto;方法，不过这个方法在ie6之前是不起作用的，所以这里就得利用ie6下text-align的特性，把body的text-align:center;这样body之下的所有子元素和元素的内容都会出现居中的效果，只要在body下，再加一层div，把所有元素都包含到div中，并且div设置text-align:left;使所有该div下面的子元素再次居左，这样既解决了ie6下margin设置无法居中的问题，也没有使用hack，所以也算是一种不错的解决方法了。
下面是代码例子：

*{margin:0px;padding:0px;}
body{height:auto;text-align:center;}
.main{width:960px;margin:10px auto;text-align:center;height:200px;background:#aaa;}


<body>
<div class = "main">
</div>
</body>

另外一种是用定位和负margin的原理。把需要居中的元素利用定位（相对定位和绝对定位）left:50%;然后再对该元素设置负边距margin-left:-width/2px;这种定位方式，我觉得使用可以更灵活。margin-left的值，是被定为元素的半宽度的负数值。

*{margin:0px;padding:0px;}
.main{width:960px;position:relative;left:50%;margin-left:-480px;height:200px;
background:#aaa;}


<body>
<div class = "main">
</div>
</body>

这种定位，不需要做兼容处理，因为在各浏览器下，都表现正常。

这两个实现居中的方法，用法都是很简单:
不过在使用的时候，还是需要注意一些问题：
第一种：在需要居中的元素的父元素要设置text-align:center;并且在需要居中的元素本身设置text-align:left;去除其子元素的居中问题，这个时候就要考虑，需要居中的这个元素是否有兄弟元素，因为其兄弟元素会受到它们父元素的text-align:center;的影响，也会出现居中的问题。（这个设置是为了兼容ie6，如果不需要兼容，那这个最优，最简单一行代码即可）
第二种的话，只要记得在需要居中的元素父元素设置相对定位即可，不会影响其他，就设置的复杂度来说，这种居中的实现，更方便简洁。

2：margin在ie6下的双边距问题。
双边距出现条件：block+float+margin;
这个问题没什么好说的，只看它出现需要的条件就可以找到解决方法了：
如果必须浮动，那么就不要block，改成inline或者inline-block，对整个布局也没有太大的影响。虽说inline和inline-block会使得元素存在一些间距，但因为有float的存在，就会消去这个间距，所以处理这个问题的一个方法就是改变display;
再有就是不让它浮动呗，或者就是不用margin，使用padding呗！
如果你这个地方非得使用float，非得使用margin，那么就改变display吧，反正对布局没有影响。

3：margin的外边距重叠问题：
重叠只出现在普通流的块级元素中，并且只会在上下边距出现。
margin在普通流中，会出现外边距叠加的问题，当两个或者更多垂直外边距相遇时，他们将形成一个外边距，这个外边距的高度等于两个发生叠加的外边距的高度中的较大者。
如果相邻的两个元素有负边距，那么这两个元素之间的边距就等于其带符号的相加的值，如果负边距大于正边距，则会两个元素之间的边距为负边距，并且两个元素在显示上会出现重叠。后面的元素，会覆盖前面的元素。

测试代码：

.main{width:160px;margin:0 auto;height:250px;background:#aaa;}
.f1{background:#123;margin:10px 5px;height:50px;}
.f2{background:#ada;margin:-20px 10px;height:50px;}
.f3{background:#efe;margin:10px 15px;height:50px;}
.f4{background:#efe;margin:20px 25px;height:50px;}


<div class = "main">
	<div class = "f1"></div>
	<div class = "f2"></div>
	<div class = "f3"></div>
	<div class = "f4"></div>
</div>

结果图：

从图中对比，可以看出，负边距照成的影响。并且f1的元素之上的空白，也是f1和main叠加之后的显示效果，main也有了上面的外边距(父元素和子元素之间出现了margin的叠加)，所以才会在上方出现一个空白的区域。

其他因素对外边距叠加的影响：

对于非块级元素：
inline-block时，ie低版本会出现叠加的情况，我认为：是因为ie低版本不支持inline-block这个属性，所以才出现了问题，使用了默认的block的属性照成的。其他浏览器和ie7+的浏览器，表现都正常，没有出现叠加。
至于inline时，inline时，作为行内元素，是不支持margin的上下边距设置的。

浮动的影响：
一个浮动的框和一个正常的框之间呢？浮动的肯定会把正常的覆盖掉了，哪里还有叠加不叠加的影响了。
不过，在ie7(含ie7)下的版本，不会被覆盖掉，但是外边距也是不会叠加的。
所以呢，一个浮动框和一个非浮动框之间，是不会出现叠加效果的。
两个都是浮动的框之间，也不会出现叠加的效果。

定位对外边距叠加的影响：

如果两个框都是相对定位的，则会出现叠加，因为相对定位依然算是普通流的元素。
两个绝对定位的元素之间呢？想想，绝对定位的外边距好像没有什么用处的。更别提margin的重叠问题了
如果一个绝对定位，一个相对定位？一个普通流，一个定位的，不存在margin的重叠发生。

如果两个可能叠加的元素一个为inline-block，一个为block呢？同样也不会出现叠加，自己试试吧！

总的来说，外边距的重叠，只出现在普通流的块级元素的上下边距处，条件不符合，就不会出现叠加现象。

除了兄弟元素之间的margin重叠，在父子元素中，也有可能会出现重叠的现象，就如上面的.f1和.main之间，就出现了margin的重叠现象，如果要规避这个现象，只需要在.mian元素上面，加入border或者padding即可。只要不让两个margin直接接触，就不会出现叠加的效果。

写代码时，多多注意应该是不会影响布局的整体效果的。

如果您发现文中有什么问题，欢迎指正！谢谢！