前端知识整理之CSS盒模型

盒模型：容得下生命（浮动）的不完美，经得起世事（定位）的颠簸。

下面的主要总结一下W3c的标准盒子模型和IE盒子模型以及如何在Js获取盒子模型对应的宽高。

1. 标准盒子模型

从图中可知标准盒子模型:

width=content.width

而在网页上占据的宽度是

width= margin-left + border-left + padding-left +content.width+padding-right + border-right + margin-right

---

2. IE盒子模型

IE盒子模型的宽度：

width=border-left + padding-left +content.width+padding-right + border-right 

注意： IE盒子模型的 content部分包含了 border 和 pading。

而在页面中占据的宽度：

width= margin-left + 给定宽 + margin-right给定宽=border-left + padding-left +content.width+padding-right + border-right

---

CSS box-sizing

CSS3为了解决兼容问题引入了box-sizing属性

用法：

• content-box 是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。

• border-box 告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px,那么这100px会包含其它的border和padding，内容区的实际宽度会是width减去border + padding的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高。