??xml version="1.0" encoding="utf-8" standalone="yes"?>
我们在实践中很有可能遇到q样的问题:
1、做一个横向导航,然后鼠标l过之后出现下拉菜单Q那么这个下拉菜单的位置控制是一个关键;
2、我们想在一个正常的面布局中放入几个Q在页面上的气泡提C,q时既不惌气提示破坏正常的文档布局Q又不想气提示的定位在不同的浏览器中到处ؕ飘?br />3、当我们在一句正常的文本中插入一个小图标的话Q一般会使用<img />标签Q而这时它的垂直居中问题又是让人困惑,无论你用html属性absmiddle、或是用css属性vertical-align、抑或是使用父对象的heigh + line-heightQ在不同的浏览器中M看v来不同?br />
嗯,上面几个问题你是否也遇到q呢Q如果你至今q没有一个很好的解决办法Q不妨l阅L文,或许能对你有所帮助Q)
我们先看一下position属性的几个取值定义:
position: static、absolute、relative
static : 默认倹{如果没有指定position属性,支持position属性的html对象都是默认为staticQ可以这么理解:把html面看作一个文档流Q源代码中各个标{先后位置是它们所对应的对象的呈现ơ序Q所有取gؓstatic的对象都按照你所~写的html标签的顺序依ơ呈现?br />如下图所C,q是一个常见的指定了float:left;的横向导航:
relative: 相对定位。这个属性g持对象所在文档流中的位置Q也是说它h和static相同的呈现方式,它同样占有在文档中的固定位|,后面的对象不会R占或覆盖Q与static属性g同的是,讄了relative的对象,可以通过top, left, right, bottom属性设定自q新显CZ|,q?个属性的取值是相对于文档流的前一个对象的Q你可以自由讄q?个属性偏Ud新的位置而不Ҏ档流中的其他对象产生M影响Q原来的面呈现仍然会我行我素:
absolute: l对定位。和relative不同的是Q这个属性g当前对象拖出文档流Q后面的对象会占有原来的位置Q也是_当前对象的呈现是独立昄的,但是它的位置在指定top, left, right, bottomM属性之前仍是有l承性的Q这时的4个属性的取值是相对于浏览器的,和文档流无关了。如果把CZ中的B区域讑֮为absolute而不指定 4个位|属性,通过讑֮margin来改变它的相对位|,用这个方法可以解军_面提到的问题2?br />
提示a: 苏昱的css2.0手册中提到relative和absolute定位的滚动条区别不是l对的,臛_在firefox、opera和safari中滚动条该出现还是会出现?br />
提示b: 属性gؓabsolute对象的z-index属性可以设|层叠显C的ơ序Q它是直接有效的Q?br />而属性gؓrelative对象的z-index属性在讄时要心Q把当前对象的z-index讄?1是不行的Q在firefox中它会无法显C,必须讄?以上Q我们如果想让别的对象挡住它Q只有将其他对象也设|position为relativeQƈz-index属性取一个比它大的值即可?br />
上面的表qC知道也许不是很清晎ͼ具体的理解还是要自己亲自动手操作一下?br />
q样看来Q前面的问题有解了Q问?我们可以Ҏ设计的要求将其设|ؓ相对或绝对定位;
问题1的解x法也有很多,个h推荐使用有语义的dl, dt, dd来实玎ͼ而且q个Ҏ在不同浏览器中的表现基本相同Q已在ie, firefox, opera, safari中测试)Q仅在top的属性上有几像素的差异,׃旉关系我只能给己测试时的代码以供参考:
body {
color:#fff;
font-size:12px;
}
ul li {
float:left;
height:30px;
background-color:#99CC99;
margin:0 10px;
padding:0;
border:1px solid #c30;
width:100px;
}
ul li div {
border:1px solid #f00;
background-color:#996666;
width:100px;
height:100px;
position:absolute;
margin-top:15px;
margin-left:-1px;
*margin-left:-79px;
}
ul li dl,
ul li dl dt,
ul li dl dd {
margin:0;
padding:0;
}
ul li dl dd {
border:1px solid #f00;
background-color:#996666;
width:100px;
height:100px;
position:absolute;
margin-top:11px;
*margin-top:10px;
margin-left:-1px;
}
<ul>
<li>
标题 - #text
<div>
下拉菜单 - div
</div>
</li>
<li style="position:relative;">列表b</li>
<li>列表c</li>
<li>
<dl>
<dt>标题 - dt</dt>
<dd>下拉菜单 - dd</dd>
</dl>
</li>
</ul>
]]>
var objDate=new Date([arguments list]);
参数形式?
以下Q种Q?br />
new Date("month dd,yyyy hh:mm:ss");
new
Date("month dd,yyyy");
new Date(yyyy,mth,dd,hh,mm,ss);
new
Date(yyyy,mth,dd);
new Date(ms);
需要注意最后一UŞ式,参数表示的是需要创建的旉?
GMT旉1970q??日之间相差的毫秒数。各U函数的含义如下Q?br />
month:用英?
表示月䆾名称Q从January到December
mth:用整数表C月份,从(Q月Q到Q1Q1Q月Q?br />
dd:表示一?
月中的第几天Q从1?1
yyyy:四位数表C的q䆾
hh:时敎ͼ?Q午夜)?3Q晚11点)
mm:
分钟敎ͼ??9的整?br />
ss:U数Q从0?9的整?br />
ms:毫秒敎ͼ为大于等?的整?/font>
如:
new
Date("January 12,2006 22:19:35");
new Date("January 12,2006");
new
Date(2006,0,12,22,19,35);
new Date(2006,0,12);
new
Date(1137075575000);
上面的各U创建Ş式都表示2006 q??2日这一天?br />
从Date 对象中提取信?br />
var objDate=new Date();
objDate.getFullYear()
以四位数字返回年
objDate.getYear()Ҏ览器不同,以两位或者四位数字返回年
objDate.getMonth()
objDate.getDate()
objDate.getDay()
objDate.getHours()
objDate.getMilliseconds().
..........
2. ?a >CSS是否正确
查一下有无拼写错误、是否忘记结 } {。可以利?a title="cleancss.com" target="_blank">CleanCSS来检?CSS的拼写错误?a title="cleancss" target="_blank">CleanCSS? 是ؓCSS减肥的工P但也能检查出拼写错误?/p>
3. 定错误发生的位|?/p>
如果错误影响了整体布局Q则可以逐个删除div块,直到删除某个div块后昄恢复正常Q即可确定错误发生的位置?/p>
4. 利用border属性确定出错元素的布局Ҏ?/p>
使用float属性布局一不小心就会出错。这时ؓ元素dborder属性确定元素边界,错误原因x落石出?/p>
5. float元素的父元素不能指定clear属?/p>
MacIE下如果对float的元素的父元素用clear属性,周围的float元素布局׃混ؕ。这是MacIE的着名的bugQ倘若不知 道就会走弯\?/p>
6. float元素务必指定width属?/p>
很多览器在昄未指定width的float元素时会有bug。所以不float元素的内容如何,一定要为其指定width属性。另外指? 元素时尽量用em而不是px做单位?/p>
7. float元素不能指定margin和padding{属?/p>
IE在显C指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属? (可以在float元素内部嵌套一个div来设|margin和padding)。也可以使用hackҎ为IE指定特别的倹{?/p>
8. float元素的宽度之和要于100%
如果float元素的宽度之和正好是100%Q某些古老的览器将不能正常昄。因此请保证宽度之和于99%?/p>
9. 是否重设了默认的样式?
某些属性如margin、padding{,不同览器会有不同的解释。因此最好在开发前首先全体的margin、padding讄?? 列表样式讄为none{?/p>
10. 是否忘记了写DTD?
如果无论怎样调整不同览器显C结果还是不一P那么可以查一下页面开头是不是忘了写下面这行DTDQ?/p>
|页可见区域宽: document.body.clientWidth;
|页可见区域高: document.body.clientHeight;
|页可见区域宽: document.body.offsetWidth (包括边线的宽);
|页可见区域高: document.body.offsetHeight (包括边线的宽);
|页正文全文宽: document.body.scrollWidth;
|页正文全文高: document.body.scrollHeight;
|页被卷ȝ高: document.body.scrollTop;
|页被卷ȝ左: document.body.scrollLeft;
|页正文部分上: window.screenTop;
|页正文部分左: window.screenLeft;
屏幕分L率的高: window.screen.height;
屏幕分L率的宽: window.screen.width;
屏幕可用工作区高度: window.screen.availHeight;
屏幕可用工作区宽度:window.screen.availWidth;
1、offsetLeft
假设 obj 为某?HTML 控g?/p>
obj.offsetTop ?obj 距离上方或上层控件的位置Q整型,单位像素?/p>
obj.offsetLeft ?obj 距离左方或上层控件的位置Q整型,单位像素?/p>
obj.offsetWidth ?obj 控g自n的宽度,整型Q单位像素?/p>
obj.offsetHeight ?obj 控g自n的高度,整型Q单位像素?/p>
我们对前面提到的“上方或上?#8221;?#8220;左方或上?#8221;控g作个说明?/p>
例如Q?/p>
<div id="tool">
<input type="button" value="提交">
<input type="button" value="重置">
</div>
“提交”按钮?offsetTop ?#8220;提交”按钮?#8220;tool”层上Ҏ的距,因ؓ距其上边最q的?“tool” 层的上边框?/p>
“重置”按钮?offsetTop ?#8220;重置”按钮?#8220;tool”层上Ҏ的距,因ؓ距其上边最q的?“tool” 层的上边框?/p>
“提交”按钮?offsetLeft ?#8220;提交”按钮?#8220;tool”层左Ҏ的距,因ؓ距其左边最q的?“tool” 层的左边框?/p>
“重置”按钮?offsetLeft ?#8220;重置”按钮?#8220;提交”按钮双框的距离Q因其左Ҏq的?#8220;提交”按钮的右Ҏ?/p>
以上属性在 FireFox 中也有效?/p>
?外:我们q里所说的是指 HTML 控g的属性|q不?document.bodyQdocument.body 的值在不同览器中有不同解释(实际上大多数环境是由于对 document.body 解释不同造成的,q不是由于对 offset 解释不同造成的)Q点击这里查看不同点?/p>
标题QoffsetTop ?style.top 的区?/p>
预备知识QoffsetTop、offsetLeft、offsetWidth、offsetHeight
我们知道 offsetTop 可以获得 HTML 元素距离上方或外层元素的位置Qstyle.top 也是可以的,二者的区别是:
一、offsetTop q回的是数字Q?style.top q回的是字符Ԍ除了数字外还带有单位Qpx?/p>
二、offsetTop 只读Q?style.top 可读写?/p>
三、如果没有给 HTML 元素指定q?top 样式Q则 style.top q回的是I字W串?/p>
offsetLeft ?style.left、offsetWidth ?style.width、offsetHeight ?style.height 也是同样道理?/p>
标题QclientHeight、offsetHeight和scrollHeight
我们q里说说四种览器对 document.body ?clientHeight、offsetHeight ?scrollHeight 的解释,q里说的?document.bodyQ如果是 HTML 控gQ则又有不同Q点击这里查看?/p>
q四U浏览器分别为IEQInternet ExplorerQ、NSQNetscapeQ、Opera、FFQFireFoxQ?/p>
2、clientHeight
clientHeight
大家?clientHeight 都没有什么异议,都认为是内容可视区域的高度,也就是说面览器中可以看到内容的这个区域的高度Q一般是最后一个工h以下到状态栏以上的这个区域,与页面内Ҏ兟?/p>
offsetHeight
IE、Opera 认ؓ offsetHeight = clientHeight + 滚动?+ Ҏ?/p>
NS、FF 认ؓ offsetHeight 是网内容实际高度,可以于 clientHeight?/p>
scrollHeight
IE、Opera 认ؓ scrollHeight 是网内容实际高度,可以于 clientHeight?/p>
NS、FF 认ؓ scrollHeight 是网内定w度,不过最值是 clientHeight?/p>
单地?/p>
clientHeight 是透过览器看内容的这个区域高度?/p>
NS?FF 认ؓ offsetHeight ?scrollHeight 都是|页内容高度Q只不过当网内定w度小于等?clientHeight ӞscrollHeight 的值是 clientHeightQ?offsetHeight 可以于 clientHeight?/p>
IE、Opera 认ؓ offsetHeight 是可视区?clientHeight 滚动条加Ҏ。scrollHeight 则是|页内容实际高度?/p>
同理
clientWidth、offsetWidth ?scrollWidth 的解释与上面相同Q只是把高度换成宽度卛_?/p>
但是
FF 在不同的 DOCTYPE 中对 clientHeight 的解释不同, xhtml 1 trasitional 中则不是如上解释的。其它浏览器则不存在此问题?/p>
标题QscrollTop、scrollLeft、scrollWidth、scrollHeight
3、scrollLeft
scrollTop ?#8220;?#8221;h的高度|CZQ?/p>
<div style="width:100px;height:100px;background-color:#FF0000;overflow:hidden;" id="p">
<div style="width:50px;height:300px;background-color:#0000FF;" id="t">如果?p 讄?scrollTopQ这些内容可能不会完全显C?lt;/div>
</div>
<script type="text/javascript">
var p = document.getElementById("p");
p.scrollTop = 10;
</script>
׃为外层元?p 讄?scrollTopQ所以内层元素会向上南?/p>
scrollLeft 也是cM道理?/p>
我们已经知道 offsetHeight 是自w元素的宽度?/p>
?scrollHeight 是内部元素的l对宽度Q包含内部元素的隐藏的部分?/p>
上述?p ?scrollHeight ?300Q?p ?offsetHeight ?100?/p>
scrollWidth 也是cM道理?/p>
IE ?FireFox 全面支持Q?Netscape ?Opera 不支?scrollTop、scrollLeftQdocument.body 除外Q?/p>
发表旉Q?007-10-15 20:20:16
标题QoffsetTop、offsetLeft、offsetWidth、offsetHeight
4、clientLeft
q回对象的offsetLeft属性值和到当前窗口左边的真实g间的距离Q可以理解ؓҎ的长?/p>
一直以来对offsetLeftQoffsetTopQscrollLeftQscrollTopq几个方法很qLQ花了一天的旉好好的学习了一下.得出了以下的l果Q?/p>
1.offsetTop :
当前对象到其上层顶部的距离.
不能对其q行赋?讄对象到页面顶部的距离Lstyle.top属?
2.offsetLeft :
当前对象到其上层左边的距离.
不能对其q行赋?讄对象到页面左部的距离Lstyle.left属?
3.offsetWidth :
当前对象的宽?
与style.width属性的区别在于:如对象的宽度讑֮gؓ癑ֈ比宽?则无论页面变大还是变?style.width都返回此癑ֈ?而offsetWidth则返回在不同面中对象的宽度D不是百分比?/p>
4.offsetHeight :
与style.height属性的区别在于:如对象的宽度讑֮gؓ癑ֈ比高?则无论页面变大还是变?style.height都返回此癑ֈ?而offsetHeight则返回在不同面中对象的高度D不是百分比?/p>
5.offsetParent :
当前对象的上U层对象.
注意.如果对象是包括在一个DIV中时,此DIV不会被当做是此对象的上?(卛_象的上层会跌DIV对象)上层是Table时则不会有问?
利用q个属性,可以得到当前对象在不同大的面中的l对位置Q?/p>
得到l对位置脚本代码
1function GetPosition(obj)
2{
3 var left = 0;
4 var top = 0;
5
6 while(obj != document.body)
7 {
8 left = obj.offsetLeft;
9 top = obj.offsetTop;
10
11 obj = obj.offsetParent;
12 }
13
14 alert("Left Is : " + left + "\r\n" + "Top Is : " + top);
15}
6.scrollLeft :
对象的最左边到对象在当前H口昄的范围内的左边的距离Q?/p>
x在出C横向滚动条的情况下,滚动条拉动的距离Q?/p>
7.scrollTop
对象的最剙到对象在当前H口昄的范围内的顶边的距离Q?/p>
x在出CU向滚动条的情况下,滚动条拉动的距离Q?/p>
我们q里说说四种览器对 document.body ?clientHeight、offsetHeight ?scrollHeight 的解释,q里说的?document.bodyQ如果是 HTML 控gQ则又有不同Q点击这里查看?/p>
q四U浏览器分别为IEQInternet ExplorerQ、NSQNetscapeQ、Opera、FFQFireFoxQ?/p>
clientHeight
大家?clientHeight 都没有什么异议,都认为是内容可视区域的高度,也就是说面览器中可以看到内容的这个区域的高度Q一般是最后一个工h以下到状态栏以上的这个区域,与页面内Ҏ兟?/p>
offsetHeight
IE、Opera 认ؓ offsetHeight = clientHeight + 滚动?+ Ҏ?/p>
NS、FF 认ؓ offsetHeight 是网内容实际高度,可以于 clientHeight?/p>
scrollHeight
IE、Opera 认ؓ scrollHeight 是网内容实际高度,可以于 clientHeight?/p>
NS、FF 认ؓ scrollHeight 是网内定w度,不过最值是 clientHeight?/p>
单地?/p>
clientHeight 是透过览器看内容的这个区域高度?/p>
NS?FF 认ؓ offsetHeight ?scrollHeight 都是|页内容高度Q只不过当网内定w度小于等?clientHeight ӞscrollHeight 的值是 clientHeightQ?offsetHeight 可以于 clientHeight?/p>
IE、Opera 认ؓ offsetHeight 是可视区?clientHeight 滚动条加Ҏ。scrollHeight 则是|页内容实际高度?/p>
同理
clientWidth、offsetWidth ?scrollWidth 的解释与上面相同Q只是把高度换成宽度卛_?/p>
说明
?上基?DTD HTML 4.01 TransitionalQ如果是 DTD XHTML 1.0 Transitional 则意义又会不同,?XHTML 中这三个值都是同一个|都表C内容的实际高度。新版本的浏览器大多支持Ҏ面指定?DOCTYPE 来启用不同的解释器。下载或览试文g?/p>