html页面拉伸缩小时盒子掉下来

box-sizing:border-box 怪异盒模型

1.具体问题：我们页面代码中经常遇到缩放页面，图片位置发生移动，实际上是border缩放的时候px已经达到了最小了，（1px为最小 我们通常设置为1px）导致内容缩放的时候边框没有缩放而造。

下图实例

我们div大盒子中的宽度为800+40边距+4个盒子2px边框=848。

假设我们缩放百分之50%，所有的内容都缩放百分之50%，小盒子宽度为100，高度为50，边距为5，总宽度400+20+8边框px=428 ，而大盒子缩放50%只有424空间，内容超出大盒子，图片就会掉下去。

 

超出盒子  图片移动

 

2.解决方法：设置怪异盒模型 属性box-sizing。

 

---

知识点：

怪异盒模型，宽度+边框=div总宽度200。

假设我们标准盒子box1宽度为200，设置边框1px，总宽度等于202px；(如下图)

设置怪异盒子加上边框1px等于200，相当于box2内容198，总宽度等于200，所以我们只需要给内容加2px，所以div直接设置为202px即可;

谁设置了边框border，就给谁设置属性：box-sizing：border-box，变成怪异盒模型，再给原来的宽度加上边框像素。