关于块状元素的一些知识点总结

学到这一块，突然发现以前对相关知识点的认识还不够透彻，所以这里再简单总结一下。
先给一道题目，可以自己思考下：
利用margin实现以下布局，要求结构为section>div*9，div顺序排列。

【纯计算角度】
（*本文只讨论在box-sizing：content-box时的情形，且只讨论在normal-flow的情况）
1.块级元素所有属性中，只有margin可为负值，只有margin/content（height/width）可以设置auto。
2.margin正负不影响计算，即其为负值仍可直接参与计算。（相当于加上一个负数）
3.当margin某个值为auto时，可能”被”计算为负值。

水平方向：块级元素(block level elements)的所有属性值（margin/padding/border/width）之和等于其包含块的width（内容区的宽度）。
垂直方向：块级元素(block level elements)的所有属性值（margin/padding/border/height）之和等于其包含块的height（内容区的高度）。

垂直方向，margin值（即top，bottom），有几个地方很特别的（也很有趣的）：
1.设置为auto时，浏览器将忽视并重置为0。
2.设置为百分数时，百分数将相对于包含块的宽度。（水平方向，百分数也是相对于父元素宽度）

当margin单个设置出现负值时：
1.margin-left：视觉上向右移
2.margin-right：视觉上向左移
3.margin-top：视觉上向上移，实际上相当于外部认为该元素开始的位置靠下
4.margin-bottom：视觉上向右移，实际上相当于外部认为该元素结束的位置靠上。
*margin-bottom为负值时，元素本身其实并没有太大变化，但会影响其后的元素（主要指块状元素）的位置。后面块状元素会”被”靠上，甚至与该元素重叠。

好了，解题。
好懒，直接贴代码了。（原代码来源我大喵老师，然后我做了改动。）

div {
  width: 100px;
  height: 100px;
  border: 2px solid #03A9F4;
  margin-top: -2px;
  margin-left: -2px;
  background-color: #FF4081;
  font: 35px "微软雅黑";
  color: white;
  text-align: center;
  line-height: 100px;
}
div:nth-child(n+4) {
  margin-left: 100px;
}
div:nth-child(6)~div {  /*优先级*/
  margin-left: 200px;
}
/**第一种方法：margin-bottom**/
div:nth-child(3n){
  margin-bottom: -308px;
}
/**第二种方法：margin-top**/
/**
div:nth-child(4), div:nth-child(7){
  margin-top: -308px;
}
**/

当然这道题本身可以用其他思路解，比如我当时第一反应是用float + translate，顺利解出来了。但直接使用margin的负值，也很简洁啊。
这种解法最有意思的部分就是向上偏移，我当时使用margin-top，而老师用了margin-bottom。
在我看来，bottom的思路实在巧妙，因此有了这篇总结。

最后，实际上任何方向使用margin负值的效果都是一致的（抛开水平竖直方向之类的概念），
区别只在于所处的环境，利用这一点，能实现的排序效果就很多了。

over。