CSS盒模型
- 盒子由margin(外边距)、border(边框)、padding(内边距)、content(内容)组成;
- 盒子的宽度 = 内容宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距;
- 盒子的高度 = 内容高度 + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距
盒子模型种类
- box-sizing: content-box(默认)----指的是W3C标准模型(本身内容宽高度+边框和内边距);
- box-sizing: border-sizing-----指的是IE模型(本身内容的宽高度);
盒模型相关函数
在jQuery中,width()方法用于获得元素宽度;
- innerWidth()方法用于获得包括内边界(padding)的元素宽度;
- outerWidth()方法用于获得包括内边界(padding)和边框(border)的元素宽度,
- 如果outerWidth(true)方法外边界(margin)也会被包括进来,即获得包括外边框(margin)、内边界(padding)和边框(border)的元素宽度。
总结:
对于同一个元素应该是:width() <= innerWidth() <= outerWidth()<=outerWidth(true);