css盒子模型

css盒子模型包括四点， content内容， padding填充， border边框， margin外边框。

简单的比喻，送快递，车厢相当于父类div，假设为body， 那我们有一个快递盒子。 我们要寄一个杯子，content的大小是不变的，然后我害怕它破了，所以要加一些填充物，防止路上颠簸，这就是padding。当我们的padding+content超过我们盒子的大小，我只能换成大盒子，div的就被撑大了。然后盒子的选择，简单的纸质盒子可能不是很好，我要加厚的，这样border就变大了，这和padding一样，如果超过我们预设的大小，那么这个盒子最后呈现出来的肯定比原本大了。然后margin是相对于车厢我把箱子放在哪的。当我放到车尾的时候，要考虑盒子的宽度，否则margin的位置+大小超过了车厢长度，那盒子就跑出车厢了，这样类似于溢出啦。这里还有一个问题，至于如何溢出，当然与我们的position设置的有关了，absolute则是左边不动，即使盒子变大也是往后增长的，但是relative则不是，是盒子变大后，根据规则展示的。

在测试的时候发现一个大问题，margin-top % 这个也是相对于父类的长度而言的，和height没关系。我在 360安全浏览器，qq浏览器，chrome， Firefox，世界之窗都测试了，都是这样子，不知道什么原因~~还是原本就这么回事

转载于:https://www.cnblogs.com/hhjiang14/p/4318212.html