div 正常和字模式 和 怪异盒子模式

盒子模型

1.正常模式下

<div style="with:200px; height:200px; padding:10px;"></div>

这是div的宽高并不是200px，而是210px。 正常模式下 div的宽高 = contnt的宽高+padding的宽高  而给div设定的宽高只是设定content的宽高 不包含padding

2.非正常模式下

<div style="with:200px; height:200px; padding:10px; box-sizing:border-box;"></div>

这里div的宽度就是200px了  这种模式下width height的值是包含了padding的

大部分浏览器默认的都是正常模式 IE浏览器下回默认是非正常模式  

为了计算方便可以全局设置div为非正常模式  特别用百分比设置宽度的时候 非正常模式很重要  之前我用百分比的时候就是 明明加起来是100% 就因为设了padding 最后一个div总是掉到下一行