关于变态盒模型的应用

在用H5制作网页时，我们通常会遇到网页内容由于过多，而受到挤压。

或者是自己想得到的内容受到覆盖。

在这个时候，我们通常都会用变态盒模型解决问题，也就是margin，padding和

border。

如下图：

因为在你的界面中，border，padding都可能会有一定的距离，所以这样导致可能

会出现把下一个div往下挤的可能。

而正常出现的情况应该是这样的：

 /* box-sizing 变态盒模型
 margin 控制不了
 能控制 padding
 还有border
 border box 添加padding或者border
 只会挤压页面内容
 content
 在content内容基础上实际上加上边距
 margin padding border*/

而其中的关键代码就是：

box-sizing: border-box;