标准盒模型和怪异盒模型的区别和应用.pdfVIP

标准盒模型和怪异盒模型的区别和应⽤ 标准盒模型 可以看到，在标准盒模型下，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盒⼦模型” ⽐如当我们使⽤百分⽐控制盒⼦的宽度时，在给盒⼦加上border，是控制不了盒⼦的宽度的，如果将盒⼦设置怪异盒模型，border就已经 包含在width⾥⾯了，width = 50% ，border = 20px ，怪异盒模型width还是50%，但是如果是标准和模型的话，width是 50%，border是20px，总宽度是⽆法控制的。