CSS Box Model 盒子模型

1.概述

1.1前言

css盒子模型具备的属性：内容(content)、填充(padding)、边框(border)、边界(margin)；而日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以用盒子模式来理解。

生活中的盒子说明：

内容(content)：盒子里装的东西。

填充(padding)：怕盒子里装的东西(贵重的)损坏而添加的泡沫或者其他抗震的辅料。

边框(border)：盒子本身。

边界(margin)：盒子摆放的时候不能全部堆在一起，留一些空隙保持通风，同时也为了方便取出。

网页中的盒子说明：

内容(content)：文字、图片等元素(一张图片里不能放东西，它自己就是自己的内容，故不是盒子)，也可以是小盒子(div嵌套)。

填充(padding)：像素填充，可有可无。

边框(border)：像素展示，可有可无。

边界(margin)：像素填充，可有可无。

两种盒子的差异：生活中的盒子中东西一般不能大于盒子，否则盒子会被撑坏。而css盒子具有弹性，里边的东西大过盒子本身最多把它撑大，但它不会损坏。

1.2 组成结构

 以Chrome浏览器中盒子模型为例：

content：内容区域，文本、图片出现的位置。CSS中的width、height属性直接作用的区域。

padding：内边距区域，存在于content 和 border 之间的区域。可使用CSS的属性有padding-top、padding-right、padding-bottom、padding-left以及padding。

border：边框区域，存在于padding 和 margin 之间的区域。在默认布局中border的宽度会设置为0，从而不显示元素的边框。

margin：外边距区域，控制其他元素与当前元素的边距距离。可使用CSS的属性有margin-top、margin-right、margin-bottom、margin-left以及margin。

1.2.1 示例

说明：样式宽度和真实占有宽度，不是同一内容。

2.盒子模型

标准盒子模型与IE盒子模型差异说明：

• 在CSS盒子模型(Box Model)规定了属性为：内容(content)、内边距(padding)、边框(border)、外边距(margin)
• 在CSS的标准盒子模型中，width和height指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。IE盒子模型中，width和height指的是内容区域+边框(左右或上下之和)+内边距(左右或上下之和)的宽度和高度。 

2.1 标准盒子模型

2.2 IE盒子模型

 

2.3 盒子说明【标准盒子模型】

内容：width、height

盒子样例(真实占有宽高都为：302*302)：

.box1{
        width: 100px;
        height: 100px;
        padding: 100px;
        border: 1px solid red;
   }
/*盒子真实占有宽度 = 左border + 左padding + width + 右padding + 右border  盒子真实占有高度 = 上border + 上padding + height + 下padding + 下border*/
.box2{
        width: 250px;
        height: 250px;
        padding: 25px;
        border: 1px solid red;
    }

盒子模型：

             

总结：

如果想保持一个盒子的真实占有高宽不变，那么加width/height的时候，就要减相应的padding。加padding的时候就要减相应的width/height。因为盒子变胖是灾难性的，会把别的盒子挤下去。

3.元素的宽与高

默认情况下，CSS中width、height属性是指content(内容)区域的宽高。

在DOM中，获取元素高宽有以下属性：clientWidth/clientHeight、offsetWidth/offsetHeight、scrollWidth/scrollHeight。

3.1 clientWidth、clientHeight

说明：对象内容的可视区的宽度、高度；包含内边距、内容区域的宽度、高度，不包滚动条等边线。

公式：

element.clientWidth = padding-left + width + padding-right
element.clientHeight = padding-top + height + padding-bottom

示例：

3.2 offsetWidth、offsetHeight

说明：对象整体的实际宽度、高度；包含了边框、内边距、内容区域以及滚动条等范围的宽度、高度；

公式：

element.offsetWidth = border-left + padding-left + width + padding-right + border-right
element.offsetHeight = border-top + padding-top + height + padding-bottom + border-bottom

 示例：

3.3 scrollWidth、scrollHeight

说明：与clientWidth、clientHeight类似(包含内边距、内容区域，但不包括滚动条)，不同的是scrollWidth、scrollHeight与元素的overflow样式属性息息相关：

当块级元素的内容超出元素大小时，其内容会根据overflow设定的值出现滚动条或内容溢出，scrollWidth、scrollHeight包含了这些不可见的内容区域。

示例：

4. box-sizing

在默认情况下，CSS中的width和height属性的值只会应用到元素的content(内容区域)，而box-sizing属性可修改此默认范围。

box-sizing的值有content-box(默认值)和border-box。

4.1 box-sizing:content-box

说明：表示CSS中的width和height属性的值只会应用到元素的内容区域。

如设置一个元素的width为200px，那么只是这个元素的内容区域宽度有200px。

4.2 box-sizing:border-box

说明：表示元素的边框和内边距的范围包含在CSS中的width、height内。

如设置一个元素的width为200px，那么此元素内容区域的宽度 = 200 - border - padding。

5. jQuery中元素宽度(高度)

jQuery提供了以下几种获取元素的宽度方法：

$(element).width()：获取元素content(内容)区域的宽度。若元素的含有 box-sizing: border-box ，会减去相应的padding、boder。

$(element).innerWidth()：获取元素 content区域 + padding 的宽度。

$(element).outerWidth()：获取元素  content区域 + padding + boder 的宽度。

$(element).outerWidth(true)：获取元素  content区域 + padding + boder + margin 的宽度。

示例图：