CSS盒模型之margin属性

　　CSS中，盒模型是一个很重要的思想概念，在处理盒模型的时候，有一些问题需要注意，特别记录在此。

　　首先，一个“盒子”是由内边距、外边距、边框以及内容构成的，当设置了元素的margin属性时，会影响当前元素的一些状态。例如，两个盒子在页面中，

一个在上，一个在下，同时设置了两个盒子的margin属性时，按理说两个盒子的边框距离应该是两个margin属性值的叠加，但由于CSS的设计导致事实并非如此，

这两个盒子之间的边框距离将会是两个margin属性中比较大的那一个，如果需求就是要让两个盒子的margin属性值叠加，解决方案又该怎么样呢？

　　这里我们可以设置float属性，将float属性设置之后，原来上下两个盒子的距离将会是二者之和，如果两个盒子在一排怎么办？那么就要设置display属性值为inline即可。

具体例子如下：

　　刚开始，我们添加两个盒子在页面中，并按照如下CSS样式进行定位：

#top_block{
    width:100px;
    height:100px;
    border:1px solid black;
    margin:10px;                  
}

#bottom_block{
    width:100px;
    height:100px;
    border:1px solid black;
    margin:10px;  
}

　　这将显示上下两个盒子，两个盒子边框之间的距离为10;接下来我们为top_block添加float属性

#top_block{
    width:100px;
    height:100px;
    border:1px solid black;
    margin:10px;        
    float:left;            
}

#bottom_block{
    width:100px;
    height:100px;
    border:1px solid black;
    margin:10px;  
    float:left;
    clear:left;  
}

　　添加完毕，添加了float属性之后，两个盒子之间的距离变成了20px；

 

转载于:https://www.cnblogs.com/dqsBK/p/6294190.html