盒子模型 -- 标准盒子模型, 怪异盒子模型

1. css 盒子模型

一个盒子模型包括: 外边距(margin), 边框(border), 内边距(padding), 内容(width/height)
注: 以下width/height 皆是指css 中代码里面的宽高, 而盒子模型的宽高皆称作为 盒子的宽高

以上也就是我们所说的 标准盒子模型(也就是W3C盒子模型)
盒子的宽高= margin + border + padding + width(height)
例如: margin = 20px, border = 5px, padding = 10px, width(height) =100px
盒子的宽高 = margin * 2 + border * 2 + padding *2 + width(height) = 170px
因此: 该盒子的实际 大小为 170px

接下来说说怪异盒子模型

以上也就是我们所说的 怪异盒子模型(也就是IE盒子模型)
盒子的宽高= margin + width(height)
例如: margin = 20px, border = 5px, padding = 10px, width(height) =100px
盒子的宽高 = margin * 2 + width(height) = 140px
因此: 该盒子的实际 大小为 140px
因为加了 border-sizing: content-box; 样式, 所以border 和padding并不会影响盒子的宽高, 只会缩减内容区域content
width(height) = border + padding + content

ps: 可以通过css3 属性进行盒子模型之间的转换

border-sizing: border-box/* 表示怪异盒模型 */
border-sizing: content-box/* 表示标准盒模型 */