标准盒模型和怪异盒模型的区别和应⽤
标准盒模型
可以看到，在标准盒模型下，width和height是内容区域，即content的width和height。
但是盒⼦的总宽度为，在标准模式下，⼀个块的总宽度 = width + margin(左右) + padding(左右) + border(左右)
怪异盒模型
⽽IE盒模型或怪异盒模型显⽽易见的区别就是，width 和 height 除了content区域外，还包含padding和border。盒⼦总宽度为⼀个块的总宽度 = width + margin(左右) (即width已经包含了padding和border值)
在不同的情况下，我们可以合理的运⽤不同的盒模型
只要在⽂档⾸部加了doctype声明，即使⽤了标准盒模型，如果不交，则会由浏览器决定。在ie浏览器中显⽰“ie盒模型”，在⾮IE浏览器中显⽰“标准w3c盒⼦模型”
margin属性值可以为百分比
⽐如当我们使⽤百分⽐控制盒⼦的宽度时，在给盒⼦加上border，是控制不了盒⼦的宽度的，如果将盒
⼦设置怪异盒模型，border就已经包含在width⾥⾯了，width = 50% ，border = 20px ，怪异盒模型width还是50%，但是如果是标准和模型的话，width是
50%，border是20px，总宽度是⽆法控制的。
W3C标准盒模型和IE盒模型(怪异盒模型)之间的转换：box-sizing:content-box | border-box | inherit;
值为content-box时，将采⽤标注盒模型进⾏解析计算；值为border-box时，将采⽤怪异盒模型进⾏解析结算；值为inherit时，将从⽗元素来继承box-sizing属性的值；

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。