- 标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin
- 低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin
首先抛开所谓的标准不说，因为这个标准是 W3C 那边制定后跟各大厂商沟通去做统一的。在这个答案中，如果按照严格来说，首先会问基本怎么计算，就像上面这个答案，不过需要注意一下顺序。
- 标准盒模型的宽度
= margin-left + border-left + padding-left + width + padding-right + border-right + margin-right，这样写可能会显得比较长，按照上面的答案来说的话，或许width + padding + border + margin就好了，附带说一下除了 width 以外是有左右两边的。 - 怪异模式的盒模型宽度
= （width + padding + border） + margin整体来说跟标准盒模型是相类似的，主要是width + padding + border这三者算在一起了。
标准的盒模型是基于 doctype 正确书写的情况下，并且是高于 IE6 的浏览器才会有的，如果是低于 IE6 的浏览器，就算是正确的 doctype 的书写情况下也是进入怪异模式的；在 IE 浏览器中如果写错了 doctype 或者是 doctype 之前有其他字符，那么可能就让 IE 进入怪异模式，从而导致浏览器解析元素盒模型出现问题，比如：
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- 这种情况下就会让低版本的 IE 进入怪异模式，导致的可能不仅仅只是盒模型计算问题，还有可能是其他的一些情况，早年之前有不少公司直接利用这种方式对低版本和高版本的浏览器做样式上的区别操作对待。
拓展问题
- 根据以上可以再问一下，当
width: 0; padding: 0 100px; border: 10px solid red; margin: 0 50px;的时候，这个盒子里有内容跟没内容，在标准盒模型和怪异模式的盒模型中有什么区别？ - 根据
box-sizng改变的盒模型的计算方式，跟这个标准盒模型以及怪异模式的盒模型的计算方式有什么区别？
609
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
