深入理解CSS盒模型

CSS盒模型

1. 盒子由margin（外边距）、border（边框）、padding（内边距）、content（内容）组成；
2. 盒子的宽度 = 内容宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距；
3. 盒子的高度 = 内容高度 + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距

盒子模型种类

1. box-sizing: content-box(默认)----指的是W3C标准模型（本身内容宽高度+边框和内边距）；
2. box-sizing: border-sizing-----指的是IE模型（本身内容的宽高度）；
   

盒模型相关函数

在jQuery中，width()方法用于获得元素宽度；

1. innerWidth()方法用于获得包括内边界（padding）的元素宽度；
2. outerWidth()方法用于获得包括内边界(padding)和边框(border)的元素宽度，
3. 如果outerWidth(true)方法外边界(margin)也会被包括进来，即获得包括外边框(margin)、内边界(padding)和边框(border)的元素宽度。

总结：
对于同一个元素应该是：width() <= innerWidth() <= outerWidth()<=outerWidth(true);