7.4：父子margin

**父盒子和子盒子的宽高、内容、margin和padding问题**

傻瓜记法：
如果father没有width、height，会随son自动扩容，否则不会。
如果一个father有content（

1.内容问题
分两种情况（以下情况都不在乎父亲是否有height和weight）：
1.）父盒子里面没有内容，这时 子盒子 就是父盒子的内容（可以这么理解：子盒子就是父盒子中的文字等元素）：
比如上面，father里没有内容，son就是他的内容
2.）父亲里面有内容（可以是汉字，比如：这里是父框架）。这时候子盒子会紧挨着父亲的内容写（注意，不会侵犯父亲的内容）。比如这样
明显地，父盒子里面有内容，所以子盒子需要在父盒子内容下一行写。

2..宽高问题
总结：不管父亲有没有内容，只要有宽高，他的宽高就不会被子盒子的行为改变（永远都唯一）；如果没有宽高，就会被子盒子自动扩容。
1.）如果有宽高的话，如果子盒子尺寸比父盒子大，子盒子会超出父盒子，宽高被限定之后的父盒子不会应为子盒子的行为而被扩容。比如最下面右图—-子盒子高度超出父盒子。

比如上面这个：son的高大于father的高，但因为father有宽高，所以father的宽高始终不变，不被son影响
2.）如果没有宽高的话，父盒子会随着子盒子的行为而被自动扩容，且高度始终包围着子盒子。如果没有宽度，父盒子和自动和他的父亲（比如body）的宽度保持一致。
比如上面这个，father没有宽高，son的高就是father的高，father的宽是继承body的宽。
简言之：父亲没有内容，子盒子就是他的内容，如果有内容，子盒子在紧挨他内容的下一行写。 不管有没有内容，只要有宽高，他的宽高就不会被子盒子的行为改变（永远都唯一）；如果没有宽高，就会被子盒子自动扩容。
3.border和margin问题
首先注意：一个div如果没有设置宽高，但是有padding或者margin，这时候默认此div的高为0px，宽等于其父元素（比如body）的宽。
如果父盒子没有border，这时候如果子盒子有margin-top，那么father盒子会随子盒子一起移动。
如果父盒子有border，那么子盒子的一切padding和margin将会以父盒子的padding为边界