html的BOX模型分析及使用jquery的宽高函数说明
?
?
?
?
?
?
?
?
?
?
?
?
?
在前端开发时，经常会遇到一种情况，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和height还包括了padding和border，
所以在定义CSS样式时，就需要分别写width和height，非常麻烦，不过不怕，我们有了jquery，问题的解决就简单多了
在使用中，我们只需要知道盒子模型，同时知道3个函数的含义，那么就不管浏览器是什么，直接针对相应位置，进行设置就可以了，具体对于浏览器的区别，jquery函数的内部都进行了处理，不用我们来操心了
?
http://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel_width
可以去这个网址，左边改变相应的width,padding,border,margin的值，看右边的变化。
右边上边的一条线为250px，下面为DIV，左边调整的为此DIV的CSS
