CSS之margin特性

1/margin部分始终是透明的。


2/值的顺序：
一个值=所有的边框；
两个值=顶底边框，两侧边框；
三个值=顶边框，两侧边框，底边框；
四个值=顺时针


3/嵌套关系里父子元素的margin上下值的传递：
嵌套关系里面，当前元素的margin的上下值会传递给父级，并作用于父级，并一直往上传递。
这个问题发生的原因是根据规范，一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己“领导”(父元素，祖先元素)的麻烦。只要给领导设置个有效的 border或者padding就可以有效的管制这个目无领导的margin防止它越级，假传圣旨，把自己的margin当领导的margin执行。
解决办法：
①父级设置一个边框；
②父级设置一个上下边框的padding值(非0值)
③(个人实验出来的)父级使用overflow:hidden; 
以上方法在IE6下不行，IE6必须触发BFC和haslayout ，也就是同时设置overflow:hidden和zoom:1;才行


4/垂直相邻的元素margin上下值的合并
当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。


5/在块元素下、行内元素下区别：
在块级元素下，可设定四边；
在内联元素下，可设定左右；上下值没效果。（但是内联元素有一部分特例，称为可置换元素，如img、input、select、textarea、button、label等，这类元素拥有内在尺寸，可以设置width/height属性，同时margin也可以设置四边。）
总结下来margin 属性可以应用于几乎所有的元素，除了表格显示类型（不包括 table-caption, table and inline-table）的元素，而且垂直外边距对非置换内联元素（non-replaced inline element）不起作用。


6/负margin技术及其应用请见下回分享！