Css 盒子模型和box-sizing

CSS 盒子模型

包括 content (内容元素），padding (内边距)，border （边框），外边距（margin）
盒子模型有两种标准：标准模型和IE模型

总结两种模型的区别：
1. 标准模型：盒模型的宽高就算内容(content)的宽高，元素的框总宽高 = 元素的宽高 + 两边的padding值 + 两边的margin值 + 两边的border值
2.IE模型：盒模型的宽高是内容(content)的宽高 + 两边的paddding值 + 两边的border值。
即，元素框的总宽高 = 盒模型（内容(content)的宽高 + 两边的paddding值 + 两边的border值）+ 两边的margin值

box-sizing 属性详解

box-sizing : content-box | border-box;

1. content-box(默认值): 可以使设置的 width | height 应用到元素的 content。盒模型的 width | height 只包含 content。即元素的实际总宽度 = margin + border + padding + width
2. border-box: 样式中设置的 width 实际上包含的是除 margin 以外的 border+padding+elment 的总宽度。盒子模型包含 content + padding + border。即元素的实际宽度 = margin + width

总结：content-box 属性即使用的是标准盒子模型；border-box 属性即使用的是 IE 盒子模型