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个函数怎么用



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

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

你可能感兴趣的:(html)