前端知识点总结之css盒模型

CSS中， Box Model叫盒子模型（或框模型），Box Model规定了元素框处理元素内容（element content）、内边距（padding）、
边框（border） 和 外边距（margin） 的方式。
在HTML文档中，每个元素（element）都有盒子模型，所以说在Web世界里（特别是页面布局），Box Model无处不在。

在 CSS 中，width 和 height 指的是内容区域（element）的宽度和高度。
增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。
如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素。

标准盒模型和IE盒子模型

W3C标准盒子模型范围包括margin、border、padding、content,并且content部分不包含其他部分。
IE盒子模型的content部分包含了border和padding。

也就是说,标准盒模型下,width和height属性就是指content的宽高,而IE和模型下width和height属性的值为content+padding+border!