html的BOX模型分析及使用jquery的宽高函数说明

[img]http://www.appquicker.com.cn:83/reportmis/mis2/reportcenter/ewebeditor/imgServlet?fileID=d07cb5db-41ff-4fbe-9b9a-4903e3165db8" alt="" border="0[/img]











下面来看图说话：

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

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

对于W3C标准来说：

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

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

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

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

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

而IE的盒子模型，起css中的width和height还包括了padding和border，

[img]http://www.appquicker.com.cn:83/reportmis/mis2/reportcenter/ewebeditor/imgServlet?fileID=1fc6082c-963e-4290-871a-f326d099b561" alt="css-box-model.jpg" width="554" height="692[/img]

a) 首先说下3个函数的含义

ii. innerHeight() --- content+padding后的高度

b) 然后说下3个函数怎么用



[url=http://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel_width]http://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel_width[/url]

右边上边的一条线为250px，下面为DIV，左边调整的为此DIV的CSS