﻿<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/"><channel><title>BlogJava-憨厚生-随笔分类-html</title><link>http://www.blogjava.net/hulizhong/category/39025.html</link><description>----Java's Slave----&lt;br&gt;
***Java's Host***</description><language>zh-cn</language><lastBuildDate>Sat, 25 Jul 2009 23:30:07 GMT</lastBuildDate><pubDate>Sat, 25 Jul 2009 23:30:07 GMT</pubDate><ttl>60</ttl><item><title>clientHeight、offsetHeight和scrollHeight</title><link>http://www.blogjava.net/hulizhong/archive/2009/07/21/287689.html</link><dc:creator>二胡</dc:creator><author>二胡</author><pubDate>Tue, 21 Jul 2009 09:44:00 GMT</pubDate><guid>http://www.blogjava.net/hulizhong/archive/2009/07/21/287689.html</guid><wfw:comment>http://www.blogjava.net/hulizhong/comments/287689.html</wfw:comment><comments>http://www.blogjava.net/hulizhong/archive/2009/07/21/287689.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/hulizhong/comments/commentRss/287689.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/hulizhong/services/trackbacks/287689.html</trackback:ping><description><![CDATA[转 http://www.cftea.com/c/751.asp<br />
<br />
<p>我们这里说说四种浏览器对 <span class="caution">document.body</span> 的&nbsp;clientHeight、offsetHeight 和 scrollHeight 的解释，这里说的是 document.body，如果是 HTML 控件，则又有不同，<a href="http://www.cftea.com/c/2006/12/PCTKER6T0V62S854.asp" target="_blank">点击这里</a>查看。</p>
<p>这四种浏览器分别为IE（Internet Explorer）、NS（Netscape）、Opera、FF（FireFox）。</p>
<p><span class="caution">文尾的重要说明比较重要，请注意。</span></p>
<p><strong>clientHeight<br />
</strong>大家对 clientHeight 都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。</p>
<p><strong>offsetHeight<br />
</strong>IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。<br />
NS、FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight。</p>
<p><strong>scrollHeight</strong><br />
IE、Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight。<br />
NS、FF 认为 scrollHeight 是网页内容高度，不过最小值是 clientHeight。</p>
<p><strong>简单地说</strong><br />
clientHeight 就是透过浏览器看内容的这个区域高度。<br />
NS、FF 认为
offsetHeight 和 scrollHeight 都是网页内容高度，只不过当网页内容高度小于等于 clientHeight
时，scrollHeight 的值是 clientHeight，而 offsetHeight 可以小于 clientHeight。<br />
IE、Opera 认为 offsetHeight 是可视区域&nbsp;clientHeight 滚动条加边框。scrollHeight 则是网页内容实际高度。</p>
<p><strong>同理</strong><br />
clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同，只是把高度换成宽度即可。</p>
<p><span class="chapterTitle">重要说明</span></p>
<p>以上是在没有指定 DOCTYPE 的情况下，如果指定了 DOCTYPE，比如：DTD XHTML 1.0 Transitional，则意义又会不同，在这种情况下这三个值都是同一个值，都表示内容的<strong>实际</strong>高度。新版本的浏览器大多支持根据页面指定的 DOCTYPE 来启用不同的解释器。下载或浏览<a href="http://www.cftea.com/c/751/PX8O1XEX53RM4DIW.htm" target="_blank">测试文件</a>。
如果要在指定的 DOCTYPE 下按上述意义来应用，怎么办呢？答案是：将 document.body 和
document.documentElement 一起应用，比如：document.documentElement.scrollLeft ||
document.body.scrollLeft（一般将 document.documentElement 写在前面），类似应用请参见：<a href="http://www.cftea.com/c/2008/06/U1FSRIC247DWTK2M.asp" target="_blank">http://www.cftea.com/c/2008/06/U1FSRIC247DWTK2M.asp</a>。</p>
<br />
<br /><img src ="http://www.blogjava.net/hulizhong/aggbug/287689.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/hulizhong/" target="_blank">二胡</a> 2009-07-21 17:44 <a href="http://www.blogjava.net/hulizhong/archive/2009/07/21/287689.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>转 详解定位与定位应用</title><link>http://www.blogjava.net/hulizhong/archive/2009/04/14/265461.html</link><dc:creator>二胡</dc:creator><author>二胡</author><pubDate>Tue, 14 Apr 2009 03:54:00 GMT</pubDate><guid>http://www.blogjava.net/hulizhong/archive/2009/04/14/265461.html</guid><wfw:comment>http://www.blogjava.net/hulizhong/comments/265461.html</wfw:comment><comments>http://www.blogjava.net/hulizhong/archive/2009/04/14/265461.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/hulizhong/comments/commentRss/265461.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/hulizhong/services/trackbacks/265461.html</trackback:ping><description><![CDATA[转 http://bbs.blueidea.com/viewthread.php?tid=2732509&amp;extra=page%3D2%26amp%3Bfilter%3Drate<br />
<strong>引伸阅读</strong><br />
&nbsp; &nbsp; * <a href="http://andymao.com/andy/post/40.html" target="_blank">解读absolute与relative</a><br />
&nbsp; &nbsp; * <a href="http://andymao.com/andy/post/67.html" target="_blank">position:relative/absolute无法冲破的等级</a><br />
&nbsp; &nbsp; * <a href="http://andymao.com/andy/post/69.html" target="_blank">对《无法冲破的等级》一文的补充</a> <br />
<br />
定位一直是WEB标准应用中的难点，如果理不清楚定位那么可能应实现的效果实现不了，实现了的效果可能会走样。如果理清了定位的原理，那定位会让网页实现的更加完美。<br />
<br />
<strong>定位的定义：</strong><br />
<br />
在CSS中关于定位的内容是：position:relative | absolute | static | fixed<br />
<br />
static 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。<br />
relative 不脱离文档流，参考自身静态位置通过 top,bottom,left,right 定位，并且可以通过z-index进行层次分级。<br />
absolute 脱离文档流，通过 top,bottom,left,right 定位。选取其最近的父级定位元素，当父级 position 为 static 时，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。<br />
fixed 固定定位，这里他所固定的对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。<br />
<br />
CSS中定位的层叠分级：z-index: auto | namber; <br />
<br />
auto 遵从其父对象的定位<br />
namber&nbsp;&nbsp;无单位的整数值。可为负数<br />
<br />
<strong>定位的原理：</strong><br />
<br />
<font color="Blue">可以位移的元素 （相对定位）</font><br />
<br />
在本文流中，任何一个元素都被文本流所限制了自身的位置，但是通过CSS我们依然使得这些元素可以改变自己的位置，我们可以通过float来让元素浮动，
我们也可以通过margin来让元素产生位置移动。但是事实上那并非是真实的位移，因为，那只是通过加大margin值来实现的障眼法。而真正意义上的位
移是通过top,right,bottom,left（下称TRBL，TRBL可以折分使用。）针对一个相对定位的元素所产生的。我们看下面的图：<br />
<img src="http://www.blogjava.net/images/blogjava_net/hulizhong/dw.PNG" alt="" border="0" /><br />
我们看图中是一个宽度为200px，高度为50px，margin:25px; border:25px solid #333;
padding:25px;
相对定位的元素，并且位移距上50px，距左50px。而下方是一块默认定位的黑色区块。我们看到这个处在文本流的区块被上面的相对定位挡住了一部分，这
说明：&#8220;当元素被设置相对定位或是绝对定位后，将自动产生层叠，他们的层叠级别自然的高于文本流&#8221;。除非设置其z-index值为负值，但是在
Firefox等浏览器中z-index为负值时将不会显示。并且我们发现当相对定位元素进行位移后，表现内容已经脱离了文本流，只是在本文流中还为原来
的相对对定位留下了原有的总宽与总高（内容的高度或是宽度加上margin\border\padding的数值）。这说明在相对定位中，虽然表现区脱离
了原来的文本流，但是在文本流中还还有此相对定位的老窩。这点要特别注意，因为在实际应用中如果相对定位的位移数值过大，那么原有的区域就会形成一块空
白。<br />
<br />
并且我们注意，定位元素的坐标点是在margin值的左上边缘点，即图中的B点。那么所有的位移的计算将以这个点为基础进行元素的推动。当TRBL为正值
时位移的方向是内聚的。由此可推，当TRBL为负值时位移的方向是外放的。在图片中有位移的箭头指向标识，带有加号的是正值位移方向，带有减号的是负值位
移方向。关于位移方位，可以延伸阅读怿飞的《由浅入深漫谈margin属性（一）》<br />
<br />
<font color="Blue">可以在任意一个位置的元素 （绝对定位）</font><br />
<br />
如上所述：相对定位只可以在文本流中进行位置的上下左右的移动，同样存在一定的局限性，虽然他的表现区脱离了文本流，但是在文本流却依然为其保留了一席之
地，这就好比一个打工的人他到了外地，但是在老家依然有一个专属于他的位置，这个位置不随他的移动而改变。但是这样很明显就会空出一块空白来，如果希望文
本流抛弃这个部分就需要用到绝对定位。绝对定位不光脱离了文本流，而且在文本流中也不会给这个绝对定位元素留下专属空位。这就好比是一个工厂里的职位，如
果有一个工人走了自然会要有别的工人来填充这个位置。而移动出去的部分自然也就成为了自由体。绝对定位将可以通过TRBL来设置元素，使之处在任何一个位
置。在父层position属性为默认值时，TRBL的坐标原点以body的坐标原点为起始。看下图：<br />
<img src="http://www.blogjava.net/images/blogjava_net/hulizhong/absolute.png" alt="" border="0" /><br />
<br />
上图可知，文本流中的内容会顶替绝对定位无素的位置，一点都不会客气。而绝对定位元素自然的层叠于文本流之上。而在单一的绝对定位中，定位元素将会跑到网页的左上角，因为那里是他们的被绝对定位后的坐标原点。<br />
<br />
<font color="Blue">被关联的绝对定位</font><br />
<br />
上面说的是单一的绝对定位，而在实际的应用中我们常常会需要用到一种特别的形式。即希望定位元素要有绝对定位的特性，但是又希望绝对定位的坐标原点可以固
定在网页中的某一个点，当这个点被移动时绝对位定元素能保证相对于这个原坐标的相对位置。也就是说需要这个绝对定位要跟着网页移动，而并且是因定在网页的
某一个固定位置。通常当网页是居中形式的时候这种效果就会显得特别的重要。要实现这种效果基本方式就是为这个绝对定位的父级设置为相对定位或是绝对定位。
那么绝对定位的坐标就会以父级为坐标起始点。<br />
<br />
虽然是如此，但是这个坐标原点却并不是父级的坐标原点，这是一个很奇怪的坐标位置。我们看一下模型图示：<br />
<img src="http://www.blogjava.net/images/blogjava_net/hulizhong/gx.png" alt="" border="0" /><br />
<br />
我们看到，这个图中父级为黑灰色区块，子级为青色区块。父级是相对定位，子级是绝对定位。子级设置了顶部位移50个像素，左倾位移50个像素。那么我们
看，子级的坐标原点并不是从父级的坐标原点位移50个像素，而是从父级块的padding左上边缘点为坐标起始点（即A点）。而父级这里如果要产生位置移
动，或是浏览器窗口大小有所变动都不会影响到这个绝对定位元素与父级的相对定位元素之间的位置关系。这个子级也不用调整数值。<br />
<br />
这是一种很特别并且也是非常实用的应用方式。如果你之前对于定位的控制并不自如的话，相信看完对这里对定位的解释一定可以把定位使用得随心所欲。<br />
<br />
<font color="Blue">总在视线里的元素 （固定定位）</font><br />
<br />
由于广告的滥用，使得一些浏览器软件都开始有了广告内容拦截，使得一些很好的效果现在都不推荐使用了。比如让一个元素可能随着网页的滚动而不断改变自己的
位置。而现在我可以通过CSS中的一个定位属性来实现这样的一个效果，这个元素属性就是曾经不被支持的position:fixed;
他的含义就是：固定定位。这个固定与绝对定位很像，唯一不同的是绝对定位是被固定在网页中的某一个位置，而固定定位则是固定在浏览器的视框位置。<br />
<br />
虽然原来的浏览器并不支持过个属性，但是浏览器的发展使得现在的高级浏览器都可以正确的解析这个CSS属性。并且通过CSS
HACK来让IE6都可以实现这样的效果（目前无法使IE5.x）实现这种效果。为了不使本文变成冗长的大论，这里只给出这个实例算是这篇文章的结束。关
于这个实例的一些问题大家可以自行分析。有不理解的地方可以给我留言！<br />
<br />
<br /><img src ="http://www.blogjava.net/hulizhong/aggbug/265461.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/hulizhong/" target="_blank">二胡</a> 2009-04-14 11:54 <a href="http://www.blogjava.net/hulizhong/archive/2009/04/14/265461.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>转 关于top、left的几个属性的讨论 </title><link>http://www.blogjava.net/hulizhong/archive/2009/04/14/265460.html</link><dc:creator>二胡</dc:creator><author>二胡</author><pubDate>Tue, 14 Apr 2009 03:51:00 GMT</pubDate><guid>http://www.blogjava.net/hulizhong/archive/2009/04/14/265460.html</guid><wfw:comment>http://www.blogjava.net/hulizhong/comments/265460.html</wfw:comment><comments>http://www.blogjava.net/hulizhong/archive/2009/04/14/265460.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/hulizhong/comments/commentRss/265460.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/hulizhong/services/trackbacks/265460.html</trackback:ping><description><![CDATA[转 http://bbs.blueidea.com/viewthread.php?tid=339278&amp;extra=page%3D2%26amp%3Bfilter%3Drate<br />
<br />
clientTop 返回对象的offsetTop属性值和到当前窗口顶部的真实值之间的距离<br />
<br />
clientLeft 返回对象的offsetLeft属性值和到当前窗口左边的真实值之间的距离<br />
<br />
clientWidth 返回对象的宽度，包括padding，但是不包括margin、border和scroll bar的宽度<br />
<br />
clientHeight 返回对象的高度，包括padding，但是不包括margin、border和scroll bar的高度<br />
<br />
<br />
<br />
offsetTop 返回对象相对于父级对象的布局或坐标的top值，就是以父级对象左上角为坐标原点，向右和向下为X、Y轴正方向的Y坐标<br />
<br />
offsetLeft 返回对象相对于父级对象的布局或坐标的left值，就是以父级对象左上角为坐标原点，向右和向下为X、Y轴正方向的x坐标<br />
<br />
offsetHeight :返回对象相对于父级对象的布局或坐标的高度值<br />
offsetWidth :返回对象相对于父级对象的布局或坐标的宽度值<br />
<br />
<br />
pixelTop 设置或返回对象相对于窗口顶部的位置<br />
pixelLeft 设置或返回对象相对于窗口左边的位置<br />
还有pixelRight&nbsp;&nbsp;pixelBottom <br />
pixelHeight pixelWidth 设置或返回对象高宽<br />
<br />
posLeft posTop posHeight posWidth 以对象相应属性中指定的单位设置或返回对象的相应属性值<br />
<br />
这是昨天在msdn属性表中找到的几个，但是单单top和left的不敢翻。<br />
以上是翻译的也夹带个人的理解，欢迎大家讨论，把这几个搞透彻对与控制层的运动很有帮助咯<br />
目前我的理解是：<br />
offset 相对值<br />
pixel、pos是绝对值<br />
client 反映父级元素绝对值<br />
<br /><img src ="http://www.blogjava.net/hulizhong/aggbug/265460.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/hulizhong/" target="_blank">二胡</a> 2009-04-14 11:51 <a href="http://www.blogjava.net/hulizhong/archive/2009/04/14/265460.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item></channel></rss>