CSS的margin属性在页面布局中的使用攻略

基础

1.元素containing-box宽高度等于内容宽度

HTML

1. <div class="wrap">  
2.     <div class="item1"></div>  
3.     <div class="item2"></div>  
4. </div>   

CSS

1. .wrap {   
2.    float: left;   
3.    border: 2px solid #000;   
4.  }   
5. .item1 {   
6.    width: 100px;   
7.    height: 100px;   
8.    background: #fdf;   
9.    margin-left: 10px;   
10.    margin-top: 10px;   
11.    margin-right: 20px;   
12.    margin-bottom: 30px;   
13. }   
14. item2 {   
15.    width: 50px;   
16.    height: 50px;   
17.    background: #adf;   
18. }  

能满足原理1的条件只有一种，元素不设宽度且不在文档流中，此时，父元素wrap产生的containing-box的宽高宽度等子元素border-box的宽高度加上外边距的宽高度，也就是说，子元素的margin值也是其containing-box的一部分。margin一共有两类参考线，第一类是margin-top与margin-left的参考线,第二类是margin-bottom与margin-right的参考线,第一类margin的参考线是以其所处的containing-box的边缘线为参考线,如上例所示,当调整元素.item1的margin-top与margin-left的值时,元素.item1所处的containing-box的大小也在发生变化因此其边缘线也在不断变化同时也就导致.item1元素自身的位置也在发生变化,看起来就是.item1自身发生了移动。第二类margin的参考线是以元素自身的边缘线(外边距的外侧为边缘线)为参考线,同样的,调整上例中的margin-bottom值,.item1的margin-bottom也在不断的发生变化,也就是说其自身边缘线在不断的移动,同时导致了.item2的移动。根据上面的论述,我们可以得出结论,外边距的调整也就等于让其自身相对的参考线的位置在发生移动,同时导致相对于参考线运动的元素发生移动。元素自身相对于containing-box的边缘线移动而移动,与元素自身为兄弟关系的元素相对于元素自身的边缘线移动而移动。参考线示意图如图所示,按箭头所指方向使参考线变化的margin值都为正值。
综上，我们可以利用margin对元素自身进行移动,同时也可让其相邻元素进行移动,移动的同时我们需要知道的是其所处的containing-box的大小也在发生变化。

综上，当元素宽高度等于内容宽高度时，可通过调整内容的margin值来调整其containing-box的大小，因为containing-box的变化也就会导致元素本身的移动，也就是说既可以移动元素，也可调整元素与元素之间的间距。

2.元素内容宽度等于其containing-box的宽度

1. <div class="wrap">  
2.    <div class="wrap-inner"></div>  
3. </div>  

1. .wrap {   
2.     width: 100px;   
3.     border: 2px solid #000;   
4.