盒模型

[junfeisu]

###　基本概念
在文档中，每个元素的呈现出来的形式都是一个一个长方形的盒子，他有长和宽这些基本的参数，通过控制这些盒子的大小就可以控制主元素在页面中的显示位置以及大小。这种模型也就是所谓的盒模型。

基本参数

• content(内容) :

  这个就是包含元素真实内容的区域，它处于盒模型的最内层。

• padding(内边距) :

  这个是用来填充这个盒子的填充区域，处于盒模型从里往外数的第二层。

• border(边界/边框) :

  这个是用来包住这个盒子的区域，处于盒模型从里往外的第三层。

• margin(外边距) :

  这个是用来让这个盒子和周围盒子保持间距的区域，处于盒模型的最外层。

下面用chrome控制台里面的盒模型展示图给大家看一下：(蓝色部分是content)

然后再举一个生活中的栗子：就是你从家电超市里面购买了一台冰箱，然后送到你家去的时候是一个盒子。盒子里面的冰箱**(实体)就是content，并且这个盒子里面会填充一些泡沫底座之类的，这个就是padding，然后外面的那层包着冰箱的纸盒子就是border，然后装着冰箱的这个盒子和别的盒子之间的间距**就是margin。

当然仔细看上面的图的话就可以发现除了content，其他三个还会分具体的方向(上下左右)。比如padding-top,margin-bottom,border-right等等。

俩大类型

• W3C盒模型 :

  W3C盒模型就是W3C采用的，在现在看来就是标准盒模型，就是大部分的现代浏览器采用的都是这种模式。

• IE盒模型 :

  大家听到IE也就知道是怎么回事了，是所有前端开发者的共同敌人，也就是IE浏览器独创的盒模型方式，当然IE6以上的浏览器标准模式下用的也是W3C盒模型，只有在怪异模式下才是IE盒模型，IE5及其以下都是IE盒模型。

• box-sizing属性

  这里补充一个东西，现在CSS3有一个属性叫box-sizing，它有俩个属性值：　content-box/border-box，一个对应W3C盒模型(前面)，后面对应IE盒模型，这样就可以给具体某个元素设置对应的渲染方法。

宽高计算方式

• W3C盒模型的计算方式

  这里只写宽度的计算方式了，高度是相同的计算方式，只是换成上下方向即可

  在页面中占据的总宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right

  盒子的实际宽度　＝　width + padding-left + padding-right + border-left + border-right

  这里的width在标准模式下，指的是给内容区设定的宽度，而不是给整个盒子设定的高度

• IE盒模型的计算方式

  在页面中占据的总宽度 = width + margin-left + margin-right

  盒子的实际宽度 = width

  这里的width指的是给整个盒子设定的宽度，也就是width = contentWidth + padding(left/right) + border(left/right)，所以当你设定width:100px也就是给整个盒子设定为100px，所以当你还设定了padding,border的时候这个时候就只能从这100px当中取出来分给padding、border，也就是说是在压榨content的width。

  所以其实总的计算方式都是一样的，在页面中占据的宽度　＝　整个盒子的宽度 + margin(left/right)，只是这个整个盒子的宽度在定义上有一点不同。

  上面我区分了一下在页面中占据的宽度和盒子的实际宽度这俩个概念，意思就是说不是你这个盒子长大多我就只给你分配多大的位置，有时候要多分点是为了让你和别人隔开一点，这样才好区分你和别的盒子。不知道大家懂没懂，自行理解吧。