??xml version="1.0" encoding="utf-8" standalone="yes"?>久草在线资源视频,高清电影一区,www.在线播放http://www.aygfsteel.com/hulizhong/category/39025.html----Java's Slave----<br> ***Java's Host***zh-cnSat, 25 Jul 2009 23:30:07 GMTSat, 25 Jul 2009 23:30:07 GMT60clientHeight、offsetHeight和scrollHeighthttp://www.aygfsteel.com/hulizhong/archive/2009/07/21/287689.html二胡二胡Tue, 21 Jul 2009 09:44:00 GMThttp://www.aygfsteel.com/hulizhong/archive/2009/07/21/287689.htmlhttp://www.aygfsteel.com/hulizhong/comments/287689.htmlhttp://www.aygfsteel.com/hulizhong/archive/2009/07/21/287689.html#Feedback0http://www.aygfsteel.com/hulizhong/comments/commentRss/287689.htmlhttp://www.aygfsteel.com/hulizhong/services/trackbacks/287689.html

我们q里说说四种览器对 document.body ?nbsp;clientHeight、offsetHeight ?scrollHeight 的解释,q里说的?document.bodyQ如果是 HTML 控gQ则又有不同Q?a target="_blank">点击q里查看?/p>

q四U浏览器分别为IEQInternet ExplorerQ、NSQNetscapeQ、Opera、FFQFireFoxQ?/p>

文尾的重要说明比较重要,h意?/span>

clientHeight
大家?clientHeight 都没有什么异议,都认为是内容可视区域的高度,也就是说面览器中可以看到内容的这个区域的高度Q一般是最后一个工h以下到状态栏以上的这个区域,与页面内Ҏ兟?/p>

offsetHeight
IE、Opera 认ؓ offsetHeight = clientHeight + 滚动?+ Ҏ?br /> NS、FF 认ؓ offsetHeight 是网内容实际高度,可以于 clientHeight?/p>

scrollHeight
IE、Opera 认ؓ scrollHeight 是网内容实际高度,可以于 clientHeight?br /> NS、FF 认ؓ scrollHeight 是网内定w度,不过最值是 clientHeight?/p>

单地?/strong>
clientHeight 是透过览器看内容的这个区域高度?br /> NS、FF 认ؓ offsetHeight ?scrollHeight 都是|页内容高度Q只不过当网内定w度小于等?clientHeight ӞscrollHeight 的值是 clientHeightQ?offsetHeight 可以于 clientHeight?br /> IE、Opera 认ؓ offsetHeight 是可视区?nbsp;clientHeight 滚动条加Ҏ。scrollHeight 则是|页内容实际高度?/p>

同理
clientWidth、offsetWidth ?scrollWidth 的解释与上面相同Q只是把高度换成宽度卛_?/p>

重要说明

以上是在没有指定 DOCTYPE 的情况下Q如果指定了 DOCTYPEQ比如:DTD XHTML 1.0 TransitionalQ则意义又会不同Q在q种情况下这三个值都是同一个|都表C内容的实际高度。新版本的浏览器大多支持Ҏ面指定?DOCTYPE 来启用不同的解释器。下载或览试文g? 如果要在指定?DOCTYPE 下按上述意义来应用,怎么办呢Q答案是Q将 document.body ? document.documentElement 一起应用,比如Qdocument.documentElement.scrollLeft || document.body.scrollLeftQ一般将 document.documentElement 写在前面Q,cM应用请参见:http://www.cftea.com/c/2008/06/U1FSRIC247DWTK2M.asp?/p>



二胡 2009-07-21 17:44 发表评论
]]>
?详解定位与定位应?/title><link>http://www.aygfsteel.com/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.aygfsteel.com/hulizhong/archive/2009/04/14/265461.html</guid><wfw:comment>http://www.aygfsteel.com/hulizhong/comments/265461.html</wfw:comment><comments>http://www.aygfsteel.com/hulizhong/archive/2009/04/14/265461.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.aygfsteel.com/hulizhong/comments/commentRss/265461.html</wfw:commentRss><trackback:ping>http://www.aygfsteel.com/hulizhong/services/trackbacks/265461.html</trackback:ping><description><![CDATA[?http://bbs.blueidea.com/viewthread.php?tid=2732509&extra=page%3D2%26amp%3Bfilter%3Drate<br /> <strong>引阅读</strong><br />     * <a target="_blank">解读absolute与relative</a><br />     * <a target="_blank">position:relative/absolute无法冲破的等U?/a><br />     * <a target="_blank">寏V无法冲破的{》一文的补充</a> <br /> <br /> 定位一直是WEB标准应用中的隄Q如果理不清楚定位那么可能应实现的效果实C了,实现了的效果可能会走栗如果理清了定位的原理,那定位会让网实现的更加完美?br /> <br /> <strong>定位的定义:</strong><br /> <br /> 在CSS中关于定位的内容是:position:relative | absolute | static | fixed<br /> <br /> static 没有特别的设定,遵@基本的定位规定,不能通过z-indexq行层次分?br /> relative 不脱L档流Q参考自w静态位|通过 top,bottom,left,right 定位Qƈ且可以通过z-indexq行层次分?br /> absolute q文档,通过 top,bottom,left,right 定位。选取其最q的父定位元素Q当父 position ?static Ӟabsolute元素以body坐标原点q行定位Q可以通过z-indexq行层次分?br /> fixed 固定定位Q这里他所固定的对像是可视H口而ƈ非是body或是父元素。可通过z-indexq行层次分?br /> <br /> CSS中定位的层叠分Qz-index: auto | namber; <br /> <br /> auto 遵从其父对象的定?br /> namber  无单位的整数倹{可?br /> <br /> <strong>定位的原理:</strong><br /> <br /> <font color="Blue">可以位移的元?Q相对定位)</font><br /> <br /> 在本文流中,M一个元素都被文本流所限制了自w的位置Q但是通过CSS我们依然使得q些元素可以改变自己的位|,我们可以通过float来让元素动Q? 我们也可以通过margin来让元素产生位置Ud。但是事实上那ƈ非是真实的位U,因ؓQ那只是通过加大margin值来实现的障眼法。而真正意义上的位 UL通过top,right,bottom,leftQ下UTRBLQTRBL可以折分使用。)针对一个相对定位的元素所产生的。我们看下面的图Q?br /> <img src="http://www.aygfsteel.com/images/blogjava_net/hulizhong/dw.PNG" alt="" border="0" /><br /> 我们看图中是一个宽度ؓ200pxQ高度ؓ50pxQmargin:25px; border:25px solid #333; padding:25px; 相对定位的元素,q且位移距上50pxQ距?0px。而下Ҏ一块默认定位的黑色区块。我们看到这个处在文本流的区块被上面的相对定位挡住了一部分Q这 说明Q?#8220;当元素被讄相对定位或是l对定位后,自动生层叠,他们的层叠别自然的高于文本?#8221;。除非设|其z-indexgؓ负|但是? Firefox{浏览器中z-index值时不会显C。ƈ且我们发现当相对定位元素q行位移后,表现内容已经q了文本流Q只是在本文中qؓ原来 的相对对定位留下了原有的d与总高Q内容的高度或是宽度加上margin\border\padding的数|。这说明在相对定位中Q虽然表现区q 了原来的文本,但是在文本流中还q有此相对定位的老窩。这点要特别注意Q因为在实际应用中如果相对定位的位移数D大,那么原有的区域就会Ş成一块空 白?br /> <br /> q且我们注意Q定位元素的坐标Ҏ在margin值的左上边缘点,卛_中的B炏V那么所有的位移的计将以这个点为基q行元素的推动。当TRBL为正? 时位Uȝ方向是内聚的。由此可推,当TRBL值时位移的方向是外放的。在囄中有位移的箭头指向标识,带有加号的是正gUL向,带有减号的是负g UL向。关于位UL位,可以延阅读怉K的《由入深O谈margin属性(一Q?br /> <br /> <font color="Blue">可以在Q意一个位|的元素 Q绝对定位)</font><br /> <br /> 如上所qͼ相对定位只可以在文本中q行位置的上下左右的UdQ同样存在一定的局限性,虽然他的表现M文本,但是在文本流却依然ؓ其保留了一席之 圎ͼq就好比一个打工的ZC外地Q但是在老家依然有一个专属于他的位置Q这个位|不随他的移动而改变。但是这样很明显׃I出一块空白来Q如果希望文 本流抛弃q个部分需要用到绝对定位。绝对定位不光脱M文本,而且在文本流中也不会l这个绝对定位元素留下专属空位。这好比是一个工厂里的职位,? 果有一个工了自然会要有别的工h来填充这个位|。而移动出ȝ部分自然也就成ؓ了自׃。绝对定位将可以通过TRBL来设|元素,使之处在M一个位 |。在父层position属性ؓ默认值时QTRBL的坐标原点以body的坐标原点ؓ起始。看下图Q?br /> <img src="http://www.aygfsteel.com/images/blogjava_net/hulizhong/absolute.png" alt="" border="0" /><br /> <br /> 上图可知Q文本流中的内容会顶替绝对定位无素的位置Q一炚w不会客气。而绝对定位元素自然的层叠于文本流之上。而在单一的绝对定位中Q定位元素将会跑到网늚左上角,因ؓ那里是他们的被绝对定位后的坐标原炏V?br /> <br /> <font color="Blue">被关联的l对定位</font><br /> <br /> 上面说的是单一的绝对定位,而在实际的应用中我们常常会需要用CU特别的形式。即希望定位元素要有l对定位的特性,但是又希望绝对定位的坐标原点可以? 定在|页中的某一个点Q当q个点被Ud时绝对位定元素能保证相对于这个原坐标的相对位|。也是说需要这个绝对定位要跟着|页UdQ而ƈ且是因定在网늚 某一个固定位|。通常当网|居中形式的时候这U效果就会显得特别的重要。要实现q种效果基本方式是个绝对定位的父讄为相对定位或是绝对定位? 那么l对定位的坐标就会以父为坐标v始点?br /> <br /> 虽然是如此,但是q个坐标原点却ƈ不是父的坐标原点,q是一个很奇怪的坐标位置。我们看一下模型图C:<br /> <img src="http://www.aygfsteel.com/images/blogjava_net/hulizhong/gx.png" alt="" border="0" /><br /> <br /> 我们看到Q这个图中父Uؓ黑灰色区块,子为青色区块。父U是相对定位Q子U是l对定位。子U设|了剙位移50个像素,左倾位U?0个像素。那么我? 看,子的坐标原点ƈ不是从父U的坐标原点位移50个像素,而是从父U块的padding左上边缘点ؓ坐标起始点(即A点)。而父U这里如果要产生位置U? 动,或是览器窗口大有所变动都不会媄响到q个l对定位元素与父U的相对定位元素之间的位|关pR这个子U也不用调整数倹{?br /> <br /> q是一U很特别q且也是非常实用的应用方式。如果你之前对于定位的控制ƈ不自如的话,怿看完对这里对定位的解释一定可以把定位使用得随心所ƌӀ?br /> <br /> <font color="Blue">d视线里的元素 Q固定定位)</font><br /> <br /> ׃q告的滥用,使得一些浏览器软g都开始有了广告内Ҏ截,使得一些很好的效果现在都不推荐使用了。比如让一个元素可能随着|页的滚动而不断改变自q 位置。而现在我可以通过CSS中的一个定位属性来实现q样的一个效果,q个元素属性就是曾l不被支持的position:fixed; 他的含义是Q固定定位。这个固定与l对定位很像Q唯一不同的是l对定位是被固定在网中的某一个位|,而固定定位则是固定在览器的视框位置?br /> <br /> 虽然原来的浏览器q不支持q个属性,但是览器的发展使得现在的高U浏览器都可以正的解析q个CSS属性。ƈ且通过CSS HACK来让IE6都可以实现这L效果Q目前无法IE5.xQ实现这U效果。ؓ了不使本文变成冗长的大论Q这里只l出q个实例是q篇文章的结束。关 于这个实例的一些问题大家可以自行分析。有不理解的地方可以l我留言Q?br /> <br /> <br /><img src ="http://www.aygfsteel.com/hulizhong/aggbug/265461.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.aygfsteel.com/hulizhong/" target="_blank">二胡</a> 2009-04-14 11:54 <a href="http://www.aygfsteel.com/hulizhong/archive/2009/04/14/265461.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>?关于top、left的几个属性的讨论 http://www.aygfsteel.com/hulizhong/archive/2009/04/14/265460.html二胡二胡Tue, 14 Apr 2009 03:51:00 GMThttp://www.aygfsteel.com/hulizhong/archive/2009/04/14/265460.htmlhttp://www.aygfsteel.com/hulizhong/comments/265460.htmlhttp://www.aygfsteel.com/hulizhong/archive/2009/04/14/265460.html#Feedback0http://www.aygfsteel.com/hulizhong/comments/commentRss/265460.htmlhttp://www.aygfsteel.com/hulizhong/services/trackbacks/265460.html
clientTop q回对象的offsetTop属性值和到当前窗口顶部的真实g间的距离

clientLeft q回对象的offsetLeft属性值和到当前窗口左边的真实g间的距离

clientWidth q回对象的宽度,包括paddingQ但是不包括margin、border和scroll bar的宽?br />
clientHeight q回对象的高度,包括paddingQ但是不包括margin、border和scroll bar的高?br />


offsetTop q回对象相对于父U对象的布局或坐标的top|是以父U对象左上角为坐标原点,向右和向下ؓX、Y轴正方向的Y坐标

offsetLeft q回对象相对于父U对象的布局或坐标的left|是以父U对象左上角为坐标原点,向右和向下ؓX、Y轴正方向的x坐标

offsetHeight :q回对象相对于父U对象的布局或坐标的高度?br /> offsetWidth :q回对象相对于父U对象的布局或坐标的宽度?br />

pixelTop 讄或返回对象相对于H口剙的位|?br /> pixelLeft 讄或返回对象相对于H口左边的位|?br /> q有pixelRight  pixelBottom
pixelHeight pixelWidth 讄或返回对象高?br />
posLeft posTop posHeight posWidth 以对象相应属性中指定的单位设|或q回对象的相应属性?br />
q是昨天在msdn属性表中找到的几个Q但是单单top和left的不敢翻?br /> 以上是翻译的也夹带个人的理解Q欢q大家讨论,把这几个搞透彻对与控制层的q动很有帮助?br /> 目前我的理解是:
offset 相对?br /> pixel、pos是绝对?br /> client 反映父元素l对?br />


二胡 2009-04-14 11:51 发表评论
]]>
վ֩ģ壺 ͺ| | | | | | | ˮ| ĵ| ˷| | | ٰ| ˹| Ѱ| ޭ| ű| | | ͷ| ˴| | | | ˳| | | ̩˳| | | ƽ| | | | ̨| | ľ| | | | |