?

一.?? 对BOX模型的说明

?

?

?

?

?

?

?

?

?

?

?

?

在前端开发时，经常会遇到一种情况，2个元素的相对位置，怎么调都差一点排好。明明定义了高度跟别的相同，但是显示出来却不一样，这是因为CSS中，对于元素的定义有一个盒子（BOX）模型。

下面来看图说话：

一个完整的盒子，包括这么4个部分，同时，除了content以外，每个部分都分为top,right,bottom,left 四个子部分，可以分别设置大小

Margin是该元素与周边元素的边界

Border是该元素的边框

Padding是该元素的补白，即元素内容到边框的距离

Content是元素的内容

对于W3C标准来说：

(A)Content：如果元素内部为文字，则为文字部分；如果为元素，则为元素的content+padding+border+margin

(B)对于我们常用的background,那么它其实占据的是border+padding+content的范围

(C)对于CSS中指定的width，height，则对应着content

(D)2个块级元素之间的margin，

对于垂直距离，为取2者的最大(marginVertical = Math.max(marginTop,marginBottom))

对于水平距离，为2者加和(marginHorizantal = marginRight+marginLeft )

(E)div，p等为块级元素，span,a等为行内元素

块级元素不管内容多少，都会占满一行。行内元素按照内容扩展大小

二.?? 不同浏览器的区别

对于不同的浏览器，其盒子标准是不一样的，如下：

主要在于标准的盒子，其css中的width和height就是针对content

而IE的盒子模型，起css中的width和heig