7. 盒模型使用margin相关技巧及解决margin-top塌陷问题

仅供学习，转载请注明出处

margin相关技巧

1、设置元素水平居中： margin:x auto;
2、margin负值让元素位移及边框合并

练习

1、制作一个600*100的盒子，边框1像素黑色，距离浏览器顶部100px，水平居中。
2、制作下面的菜单效果：

实现代码如下：

    
    
    



    
1
    
2
    
3
    
4
    
5

浏览器展示如下：

外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。解决方法如下：

1、使用这种特性
2、设置一边的外边距，一般设置margin-top
3、将元素浮动或者定位

练习

使用div标签制作如下布局:

实现代码如下：

    
    


    

        

            外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
        
        

            外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
        
        

            外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
        
        

            外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
        
    

浏览器展示如下：

从上面的代码来看，可以看到里面的四个div都有margin-top和margin-bottom，所以两个div加起来按照道理应该是40px，但是由于外边距的这个特性，margin-top会和margin-bottom合并，此时距离也是只有20px，才可以呈现上面的效果。

margin-top 塌陷

在两个盒子嵌套时候，内部的盒子设置的margin-top会加到外边的盒子上，导致内部的盒子margin-top设置失败，解决方法如下：

1、外部盒子设置一个边框
2、外部盒子设置 overflow:hidden
3、使用伪元素类：

.clearfix:before{
    content: '';
    display:table;
}

练习

分别使用margin间距和padding间距制作下面的例子：

首先来看看这个margin-top坍陷是什么情况

先写好两个box来看看。

    
    


    

        
1
    

浏览器展示如下：

按照道理，给内部的绿色div设置一个与外部div顶部的margin-top为76px，那么绿色 的div应该就会移动下来的了。

给绿色的div设置margin-top为76px

浏览器显示如下：

这就是传说之中的margin-top塌陷现象。

那么怎么解决呢？

可以用上面介绍的三种方法：
1、外部盒子设置一个边框
2、外部盒子设置 overflow:hidden
3、使用伪元素类：

.clearfix:before{
    content: '';
    display:table;
}

首先使用第一种解决方法，设置外边框

再来看看 overflow:hidden 的方式

这种方法挺好的，但是缺点就是 overflow:hidden 是本来用来遮掩溢出的元素的。用来修复这个bug的确不合适。

下面来看看另一种方法。

使用伪元素类，其实就是相当于创建一个外边框

关注微信公众号，回复【资料】、Python、PHP、JAVA、web，则可获得Python、PHP、JAVA、前端等视频资料。