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

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

能满足原理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值都为正值。