js学习小结（三）2014.4.18-外边距合并，负边距和浏览器渲染，盒模型

  昨天和今天，查了一些有关css的资料，看得乱七八糟，毫无头绪。真心觉得css比js难。

  保存写得很好的两篇文章：

1.http://www.hicss.net/i-know-you-do-not-know-the-negative-margin/

2.http://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/

   1.（参考资料：http://www.w3school.com.cn/css/css_margin_collapsing.asp）

（1）外边距合并是指当两个垂直外边距相遇时，会发生合并，合并之后的高度等于合并之前两个中较大的那一个。

（2）当在块元素中没有padding，没有border把margin和content分开时，它的子元素的上边距会和父元素的上边距合并。

（3）当一个元素为空，没有内容，并且没有padding和border，它的上下外边距也会合并

（4）只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

 做了一个浮动框，观察是否会合并外边距的测试：

2 注意负边距（margin）并不会影响盒子的大小，如果margin-top和margin-left为负，那么会像有力量把该块向上或向左挪动了一样，如果margin-bottom或者margin-left为负，则会影响后面元素定位的准线，对元素本身没有任何影响，利用负外边距可以做很多事情，最典型的就是三栏流动式布局，将two_wrapper的margin-right，设置为负值，欺骗了浏览器，告诉浏览器，从two_wrapper的内部定位，把下面的div拉了上去。