DIV常見任務(wù)(上) —常規(guī)任務(wù)(顯示滾動(dòng)條/隱藏div/禁止事件冒泡等等)
發(fā)布時(shí)間:2013-01-31 09:15:59 作者:佚名
我要評(píng)論

DIV在Web開發(fā)中起著至關(guān)重要的作用,這里總結(jié)一下我在使用DIV中遇到的各種操div顯示滾動(dòng)條/禁止div的事件冒泡/禁止div執(zhí)行默認(rèn)的行為/動(dòng)態(tài)計(jì)算div的位置(比如常見的計(jì)算div彈出層的位置) /隱藏div元素等等,感興趣的朋友可以了解下啊,或許對(duì)你有所幫助
作為最常用的布局元素,DIV在Web開發(fā)中起著至關(guān)重要的作用。這里總結(jié)一下我在使用DIV中遇到的各種操作。
1.div顯示滾動(dòng)條
這個(gè)是很常見的一個(gè)任務(wù)了,基本是通過CSS去實(shí)現(xiàn)滾動(dòng)條。
(1)垂直滾動(dòng)條
設(shè)置是否顯示滾動(dòng)條主要是在CSS中設(shè)置下列的屬性:
overflow:visible|auto|hidden|scroll
overflow-x:橫向滾動(dòng)條
overflow-y:縱向滾動(dòng)條
參數(shù)的意義:
visible: 不剪切內(nèi)容也不添加滾動(dòng)條。假如顯式聲明此默認(rèn)值,對(duì)象將被剪切為包含對(duì)象的window或frame的大小。并且clip屬性設(shè)置將失效。
auto: 此為body對(duì)象和textarea的默認(rèn)值。在需要時(shí)剪切內(nèi)容并添加滾動(dòng)條
hidden: 不顯示超過對(duì)象尺寸的內(nèi)容
scroll: 總是顯示滾動(dòng)條
overflow:auto;這個(gè)表示當(dāng)你內(nèi)容超過div高度出現(xiàn)垂直的滾動(dòng)條
所以我們想在需要的時(shí)候顯示垂直的滾動(dòng)條,可以這么實(shí)現(xiàn):
<divstyle="overflow:auto;">...</div>
或者
<divstyle="overflow-y:auto;">...</div>
(2)水平滾動(dòng)條
如果只想出現(xiàn)水平的滾動(dòng)條,一般還要配合禁止換行的設(shè)置,例如:
<divstyle="overflow-x:auto;height:40px;width:100px;white-space:nowrap"></div>
(3)滾動(dòng)條的外觀
在IE中,主要是使用各種顏色屬性:
scrollbar-3dlight-color:color;設(shè)置或檢索滾動(dòng)條亮邊框顏色;
scrollbar-highlight-color:color;設(shè)置或檢索滾動(dòng)條3D界面的亮邊顏色;
scrollbar-face-color:color;設(shè)置或檢索滾動(dòng)條3D表面的顏色;
scrollbar-arrow-color:color;設(shè)置或檢索滾動(dòng)條方向箭頭的顏色;當(dāng)滾動(dòng)條出現(xiàn)但不可用時(shí),此屬性失效;
scrollbar-shadow-color:color;設(shè)置或檢索滾動(dòng)條3D界面的暗邊顏色;
scrollbar-darkshadow-color:color;設(shè)置或檢索滾動(dòng)條暗邊框顏色;
scrollbar-base-color:color;設(shè)置或檢索滾動(dòng)條基準(zhǔn)顏色。其它界面顏色將據(jù)此自動(dòng)調(diào)整。
scrollbar-track-color:color;設(shè)置或檢索滾動(dòng)條的拖動(dòng)區(qū)域顏色
在Chrome中,基本上是使用webkit專用屬性設(shè)置:
::-webkit-scrollbar-track-piece{
background-color:#fff;/*滾動(dòng)條的背景顏色*/
-webkit-border-radius:0;/*滾動(dòng)條的圓角寬度*/
}
::-webkit-scrollbar{
width:8px;/*滾動(dòng)條的寬度*/
height:8px;/*滾動(dòng)條的高度*/
}
::-webkit-scrollbar-thumb:vertical{/*垂直滾動(dòng)條的樣式*/
height:50px;
background-color:#999;
-webkit-border-radius:4px;
outline:2pxsolid#fff;
outline-offset:-2px;
border:2pxsolid#fff;
}
::-webkit-scrollbar-thumb:hover{/*滾動(dòng)條的hover樣式*/
height:50px;
background-color:#9f9f9f;
-webkit-border-radius:4px;
}
::-webkit-scrollbar-thumb:horizontal{/*水平滾動(dòng)條的樣式*/
width:5px;
background-color:#CCCCCC;
-webkit-border-radius:6px;
}
2.禁止div的事件冒泡
這個(gè)基本上都是使用標(biāo)準(zhǔn)的event.stopPropagation()方法阻止事件冒泡,當(dāng)然IE除外:
functionBigDiv(event){
if(event.stopPropagation){
event.stopPropagation();//在基于firefox內(nèi)核的瀏覽器中支持做法stopPropagation
}else{
event.cancelBubble=true;//基于ie的寫法
}
//othercodes...
}
3.禁止div執(zhí)行默認(rèn)的行為
這個(gè)其實(shí)是一個(gè)普遍的問題,對(duì)于具有默認(rèn)行為的元素,比如提交按鈕的提交表單行為,,<a>元素的超鏈接行為等,我們?nèi)绻谶@些元素上應(yīng)用事件,同時(shí)也往往希望取消它們的默認(rèn)行為,這個(gè)通過在事件的回調(diào)函數(shù)中調(diào)用event.preventDefault();實(shí)現(xiàn)。
4.動(dòng)態(tài)計(jì)算div的位置(比如常見的計(jì)算div彈出層的位置)
(1)DOM屬性方式
offsetTop:當(dāng)前對(duì)象到其上級(jí)層頂部的距離。不能對(duì)其進(jìn)行賦值,設(shè)置對(duì)象到父對(duì)象頂部的距離需要使用style.top屬性。
offsetLeft:當(dāng)前對(duì)象到其上級(jí)層左邊的距離.。不能對(duì)其進(jìn)行賦值,設(shè)置對(duì)象到父對(duì)象左邊的距離需要使用style.left屬性。
這里要注意offsetTop與style.top的區(qū)別(offsetLeft與style.left也是一樣的道理):
•offsetTop返回的是數(shù)字,而style.top返回的是字符串,除了數(shù)字外還帶有單位:px,通常需要使用parseInt轉(zhuǎn)換成數(shù)值。
•offsetTop只讀,而style.top可讀寫。
•如果沒有給HTML元素指定過top樣式,則style.top返回的是空字符串。
注意:在FireFox中,給style.top賦值的時(shí)候,也要是字符串(帶px)這種形式。
(2)CSS中position屬性對(duì)位置的影響
position默認(rèn)的屬性值都是static,靜態(tài)。但是position中最關(guān)鍵的屬性值是relative(相對(duì))以及absolute(絕對(duì))。
往往我們會(huì)把a(bǔ)bsolute屬性與left、top配合起來制作相關(guān)的“懸浮層”效果。然而有時(shí)候我們需要針對(duì)某一個(gè)容器的懸浮效果,而不是針對(duì)窗口的。這時(shí)候通過高度、寬度的計(jì)算不但麻煩,而且?guī)缀鯚o法完美實(shí)現(xiàn)效果。其實(shí)只要把其上一級(jí)的樣式屬性position設(shè)置為relative就可以了。也就是說,position的屬性值的效果,直接受其容器樣式中position屬性值影響。例如如下A-B的嵌套結(jié)構(gòu)
<divid="A">
<divid="B">
</div>
</div>
當(dāng)A的position為relative時(shí),B的position為absolute才有效。這時(shí)候left:0、top:0就不再針對(duì)窗口文檔,而是針對(duì)id為A的這個(gè)div了。但是如果你在A中的padding="50px",在A中的其他沒有設(shè)置postion為absolute的會(huì)隨著A的padding的值而變化,但是B不會(huì)變的它的position是相對(duì)上一級(jí)的。
這里再稍微啰嗦一下position的四個(gè)屬性值:relative,absolute,fixed,static。還是以上面的代碼為例:
relative
relative值意味著元素要根據(jù)它本身的位置進(jìn)行相對(duì)的偏移。例如在上面的代碼中,如果設(shè)定B設(shè)置了relative值,比如設(shè)置如下CSS代碼:
#B{
position:relative;
padding:5px;
top:5px;
left:5px;
}
我們可以這樣理解,如果不設(shè)置relative屬性,B的位置按照正常的文檔流,它應(yīng)該處于某個(gè)位置。但當(dāng)設(shè)置B的position為relative后,將根據(jù)top,right,bottom,left的值按照它理應(yīng)所在的位置進(jìn)行偏移,relative的“相對(duì)的”意思也正體現(xiàn)于此。
注意:relative的偏移是基于對(duì)象的margin的左上側(cè)的。
absolute
這個(gè)屬性總是有人給出誤導(dǎo)。說當(dāng)position屬性設(shè)為absolute后,總是按照瀏覽器窗口來進(jìn)行定位的,這其實(shí)是錯(cuò)誤的。實(shí)際上,這是fixed屬性的特點(diǎn)。
當(dāng)B的position設(shè)置為absolute后,其到底以誰為對(duì)象進(jìn)行偏移呢?這里分為兩種情況:
•當(dāng)B的父對(duì)象(或曾祖父,只要是父級(jí)對(duì)象)parent也設(shè)置了position屬性,且position的屬性值為absolute或者relative時(shí),也就是說,不是默認(rèn)值的情況,此時(shí)B按照這個(gè)parent來進(jìn)行定位。
•當(dāng)B不存在一個(gè)有著position屬性的父對(duì)象,那么那就會(huì)以body為定位對(duì)象,按照瀏覽器的窗口進(jìn)行定位,這個(gè)比較容易理解。
fixed
fixed是特殊的absolute,即fixed總是以body為定位對(duì)象的,按照瀏覽器的窗口進(jìn)行定位。
static
position的默認(rèn)值,一般不設(shè)置position屬性時(shí),會(huì)按照正常的文檔流進(jìn)行排列。
(3)Jquery方式
提示類彈出框是常見的一種方式,這個(gè)任務(wù)最重要的是計(jì)算彈出框的位置。通過事件對(duì)象獲取到事件源,然后可以使用offset()函數(shù)計(jì)算事件源相對(duì)于document的位置:
vartop=$(event.target).offset().top;
varleft=$(event.target).offset().left;
因?yàn)槭窍鄬?duì)于document,即頁面左上角的位置,所以需要將彈出層放在Body元素中的第一層,即父類就是body。如果包含在其他元素中,需要確定任何一個(gè)父類的position樣式設(shè)置為了relative。計(jì)算出來的top和left是事件源的位置,在此位置顯示會(huì)將事件源對(duì)象遮蓋住。所以通常需要手工做一些偏移,比如top+20。
5.隱藏div元素
css中隱藏元素可以有兩種方式:display:none或者visibility:hidden。兩種方式的不同之處在于設(shè)置display的值后元素完全隱藏,元素所占的位置也沒有了,下面的元素上移。設(shè)置visibility后元素所占的位置還在,就是看不見。
6.div的子元素橫排,豎排
使用float屬性控制。div默認(rèn)是豎排的,寬度是100%,CSS中設(shè)置float:left以后就變成橫排了。如果想從橫排中間斷開,后面的還原成豎排,則需要使用clear:both修改??聪旅娴睦樱?
<div>
<divstyle="float:left">aaaaaaaaaaaaaa</div>
<divstyle="float:left">bbbbbbbbbbbbbb</div>
以上這兩個(gè)div就是橫向排列。
<divstyle="clear:both"></div>這個(gè)東西很重要,它清除上兩個(gè)層的浮動(dòng),也就是說以下的層就繼續(xù)垂直排列了。
<div>這個(gè)層就垂直排列了</div>
<div>這個(gè)層就垂直排列了</div>
</div>
上面只是float屬性的一個(gè)簡(jiǎn)單應(yīng)用。
float屬性主要是用于控制元素的流向,也就是向右靠攏,還是向左靠攏。這里看一下float屬性的語法:
float:none|left|right
none:默認(rèn)值。對(duì)象不飄浮
left:文本流向?qū)ο蟮挠疫?
right:文本流向?qū)ο蟮淖筮?
為了達(dá)到某些效果,通常我們需要在某個(gè)時(shí)候取消浮動(dòng)以免對(duì)別的對(duì)象造成影響,這是通過上面介紹過的那個(gè)clear屬性實(shí)現(xiàn)的:
clear屬性有四個(gè)值:
clear:both|left|right|none;
簡(jiǎn)單來說呢,clear屬性的作用就是“清除”浮動(dòng)。如果某元素設(shè)置clear:left;表示該元素左邊不存在浮動(dòng)元素;相應(yīng)的,clear:right;表示該元素右邊不存在浮動(dòng)元素;clear:both;表示該元素兩邊都不存浮動(dòng)元素。clear:none表示兩邊允許有浮動(dòng)元素。
7.設(shè)置div中文字的字體
先看一下CSS中控制文本的屬性列表:
Word-spacing:定義了各個(gè)單詞之間的間距,取值:Normal|<length>。
Letter-spacing:定義了每個(gè)字母之間的間距,取值:Normal|<length>。
Text-decoration:定義文字的“裝飾”樣式,取值范圍:None|underline|overline|line-through|blink。
Vertical-align:定義了元素在垂直方向上的位置,取值:Baseline|sub|super|top|text-top|middle|bottom|text-bottom|<percentage>。
text-transform:使文本轉(zhuǎn)換為其它形式,取值:Capitalize|uppercase|lowercase|none。
Text-align:定義了文字的對(duì)齊方式,取值:Left|right|center|justify。
Text-indent:定義了文本的首行的縮進(jìn)方式,取值:<length>|<percentage>。
Line-height:定義了文本的行高,取值:Normal|<number>|<length>|<percentage>。
我們可以從上面看到在這里可以定義文本的文字間距、字母間距、裝飾、對(duì)齊方式、縮進(jìn)方式和行高等屬性。舉個(gè)例子來看看吧:
<pstyle="letter-spacing:5px;text-align:justify;text-indent:4em;line-height:17pt">我們看到經(jīng)過文本屬性處理的文本字與字之間多了間距,行與行之間多了行高,對(duì)齊方式變成了兩端對(duì)齊,并且段首又多縮進(jìn)了兩格。</p>
letter-spacing設(shè)置了字間距為5px,其中5px為一個(gè)長度單位;text-align設(shè)置了對(duì)齊方式為兩端對(duì)齊;indent設(shè)置了縮進(jìn)格為4em;line-height設(shè)置了行高為17pt。從上面的例子,我們可以看出利用CSS的文本屬性可以方便的對(duì)頁面中的文本進(jìn)行排版。
行間距取決于字體的大小,一般來說,小的字號(hào)需要大一點(diǎn)的行間距來便于閱讀,中文字體在網(wǎng)頁上如果沒有行間距的設(shè)定,對(duì)于閱讀大段文字來說是讀者的災(zāi)難,所以適當(dāng)設(shè)定line-height是非常必要的。一般地,line-height在網(wǎng)頁設(shè)計(jì)中應(yīng)該是字體大小的1.5倍到2倍。Word和其它的文本編輯軟件里,一般設(shè)定字體的120%作為缺省的行間距。css里的line-height設(shè)定,是均分后加在每一行的上下,也就是說,如果line-height設(shè)定為20px的話,那么每一行文字的上下各有10px的間距。
8.設(shè)置div的tooltip分行顯示
在html種對(duì)于鏈接和圖片,我們可以通過添加title屬性以顯示一些說明文字,一般情況下,這些文字都是顯示成一行,那么有沒有辦法讓它以多行的方式顯示呢?解決的方法有兩種:
(1).將title屬性分成幾行來寫,例如:
<ahref=#"title="說明一
說明二
說明三">建站學(xué)</a>
(2).第一行相對(duì)來說不夠直觀,我們還可以在需換行的地方添加 (&為半角)或 來實(shí)現(xiàn):
<ahref=#"title="說明一 說明二 說明三">建站學(xué)</a>
<ahref=#"title="說明一 說明二 說明三">建站學(xué)</a>
9.鼠標(biāo)中鍵控制水平滾動(dòng)條
在Chrome和FireFox中,一般都是鼠標(biāo)中鍵控制垂直滾動(dòng)條,如果你的DIV只有水平控制條,默認(rèn)情況下,鼠標(biāo)中鍵是不起滾動(dòng)作用的,這個(gè)時(shí)候需要自己實(shí)現(xiàn)。
首先,掛接鼠標(biāo)滾輪事件:
//MousewheeleventforNonFireFox
element.onmousewheel=fireElementScrolled;
//MousewheeleventforFireFox
element.addEventListener('DOMMouseScroll',fireElementScrolled,false);
這里FireFox的特殊一點(diǎn),需要使用addEventListener這種方式掛接。
然后,實(shí)現(xiàn)fireElementScrolled方法:
fireElementScrolled=function(event){
varrolled=0;
if(event.wheelDelta){
rolled=event.wheelDelta;
}
else{
//Firefox:需要處理一下下
rolled=-event.detail*30;
}
varhtmlElement=document.getElementById('test');
htmlElement.scrollLeft=htmlElement.scrollLeft-rolled;
event.preventDefault();
returnfalse;
};
原理很簡(jiǎn)單,就是拿到滾輪滾動(dòng)的距離,處理后給div元素的scrollLeft屬性賦值即可。
10.子元素居中
(1)水平居中
普通的文字和圖片居中很好辦,設(shè)置父容器的CSS樣式包含text-align:center;即可。
當(dāng)子元素是DIV等元素的情況稍微復(fù)雜一點(diǎn),以子元素為div為例,如果只有一個(gè)子div,則可以通過設(shè)置子元素的CSS樣式包含margin:0auto;實(shí)現(xiàn)居中。例如下面的例子:
<divid="a"style="width:400px;height:300px;border:1pxsolidgreen;">
<divid="b"style="margin:0auto;width:200px;border:1pxsolidblue;">簡(jiǎn)單的一個(gè)子DIV居中問題</div>
</div>
如果含有多個(gè)子元素,我通常是多加一層div來實(shí)現(xiàn),看例子:
<divstyle="width:400px;height:300px;border:1pxsolidred;">
<divstyle="margin:0auto;position:relative;left:50%;float:left;">
<divstyle="position:relative;left:-50%;float:left">
<divstyle="border:1pxsolidblue;text-align:center;">1</div>
<divstyle="border:1pxsolidblue;text-align:center;">2</div>
<divstyle="border:1pxsolidblue;text-align:center;">3</div>
<divstyle="border:1pxsolidblue;float:left;">4</div>
<divstyle="border:1pxsolidblue;float:left;">5</div>
<divstyle="border:1pxsolidblue;float:left;">6</div>
</div>
</div>
</div>
(2)垂直居中
垂直居中麻煩一點(diǎn),有一種做法很簡(jiǎn)單,可以同時(shí)實(shí)現(xiàn)水平和垂直居中。首先給父元素寫上positon:relative,這么做是為了給子元素打上position:absolute的時(shí)候不會(huì)被定位到外面去。接下去,寫上子元素的height和width,某些瀏覽器在解析的時(shí)候如果沒有這2個(gè)值的話會(huì)出現(xiàn)意想不到的錯(cuò)位。接著就是整個(gè)方法的核心,給子元素再打上top:50%;left:50%以及margin-top:一半的height值的的負(fù)數(shù);margin-left:一半的weight值的負(fù)數(shù)。當(dāng)然,這里父元素也要先寫上width和height??蠢樱?
<divstyle="width:600px;height:300px;position:absolute;top:50%;left:50%;margin-top:-150px;margin-left:-300px;border:1pxsolidred;">居中方法</div>
1.div顯示滾動(dòng)條
這個(gè)是很常見的一個(gè)任務(wù)了,基本是通過CSS去實(shí)現(xiàn)滾動(dòng)條。
(1)垂直滾動(dòng)條
設(shè)置是否顯示滾動(dòng)條主要是在CSS中設(shè)置下列的屬性:
復(fù)制代碼
代碼如下:overflow:visible|auto|hidden|scroll
overflow-x:橫向滾動(dòng)條
overflow-y:縱向滾動(dòng)條
參數(shù)的意義:
visible: 不剪切內(nèi)容也不添加滾動(dòng)條。假如顯式聲明此默認(rèn)值,對(duì)象將被剪切為包含對(duì)象的window或frame的大小。并且clip屬性設(shè)置將失效。
auto: 此為body對(duì)象和textarea的默認(rèn)值。在需要時(shí)剪切內(nèi)容并添加滾動(dòng)條
hidden: 不顯示超過對(duì)象尺寸的內(nèi)容
scroll: 總是顯示滾動(dòng)條
overflow:auto;這個(gè)表示當(dāng)你內(nèi)容超過div高度出現(xiàn)垂直的滾動(dòng)條
所以我們想在需要的時(shí)候顯示垂直的滾動(dòng)條,可以這么實(shí)現(xiàn):
復(fù)制代碼
代碼如下:<divstyle="overflow:auto;">...</div>
或者
復(fù)制代碼
代碼如下:<divstyle="overflow-y:auto;">...</div>
(2)水平滾動(dòng)條
如果只想出現(xiàn)水平的滾動(dòng)條,一般還要配合禁止換行的設(shè)置,例如:
復(fù)制代碼
代碼如下:<divstyle="overflow-x:auto;height:40px;width:100px;white-space:nowrap"></div>
(3)滾動(dòng)條的外觀
在IE中,主要是使用各種顏色屬性:
復(fù)制代碼
代碼如下:scrollbar-3dlight-color:color;設(shè)置或檢索滾動(dòng)條亮邊框顏色;
scrollbar-highlight-color:color;設(shè)置或檢索滾動(dòng)條3D界面的亮邊顏色;
scrollbar-face-color:color;設(shè)置或檢索滾動(dòng)條3D表面的顏色;
scrollbar-arrow-color:color;設(shè)置或檢索滾動(dòng)條方向箭頭的顏色;當(dāng)滾動(dòng)條出現(xiàn)但不可用時(shí),此屬性失效;
scrollbar-shadow-color:color;設(shè)置或檢索滾動(dòng)條3D界面的暗邊顏色;
scrollbar-darkshadow-color:color;設(shè)置或檢索滾動(dòng)條暗邊框顏色;
scrollbar-base-color:color;設(shè)置或檢索滾動(dòng)條基準(zhǔn)顏色。其它界面顏色將據(jù)此自動(dòng)調(diào)整。
scrollbar-track-color:color;設(shè)置或檢索滾動(dòng)條的拖動(dòng)區(qū)域顏色
在Chrome中,基本上是使用webkit專用屬性設(shè)置:
復(fù)制代碼
代碼如下:::-webkit-scrollbar-track-piece{
background-color:#fff;/*滾動(dòng)條的背景顏色*/
-webkit-border-radius:0;/*滾動(dòng)條的圓角寬度*/
}
::-webkit-scrollbar{
width:8px;/*滾動(dòng)條的寬度*/
height:8px;/*滾動(dòng)條的高度*/
}
::-webkit-scrollbar-thumb:vertical{/*垂直滾動(dòng)條的樣式*/
height:50px;
background-color:#999;
-webkit-border-radius:4px;
outline:2pxsolid#fff;
outline-offset:-2px;
border:2pxsolid#fff;
}
::-webkit-scrollbar-thumb:hover{/*滾動(dòng)條的hover樣式*/
height:50px;
background-color:#9f9f9f;
-webkit-border-radius:4px;
}
::-webkit-scrollbar-thumb:horizontal{/*水平滾動(dòng)條的樣式*/
width:5px;
background-color:#CCCCCC;
-webkit-border-radius:6px;
}
2.禁止div的事件冒泡
這個(gè)基本上都是使用標(biāo)準(zhǔn)的event.stopPropagation()方法阻止事件冒泡,當(dāng)然IE除外:
復(fù)制代碼
代碼如下:functionBigDiv(event){
if(event.stopPropagation){
event.stopPropagation();//在基于firefox內(nèi)核的瀏覽器中支持做法stopPropagation
}else{
event.cancelBubble=true;//基于ie的寫法
}
//othercodes...
}
3.禁止div執(zhí)行默認(rèn)的行為
這個(gè)其實(shí)是一個(gè)普遍的問題,對(duì)于具有默認(rèn)行為的元素,比如提交按鈕的提交表單行為,,<a>元素的超鏈接行為等,我們?nèi)绻谶@些元素上應(yīng)用事件,同時(shí)也往往希望取消它們的默認(rèn)行為,這個(gè)通過在事件的回調(diào)函數(shù)中調(diào)用event.preventDefault();實(shí)現(xiàn)。
4.動(dòng)態(tài)計(jì)算div的位置(比如常見的計(jì)算div彈出層的位置)
(1)DOM屬性方式
offsetTop:當(dāng)前對(duì)象到其上級(jí)層頂部的距離。不能對(duì)其進(jìn)行賦值,設(shè)置對(duì)象到父對(duì)象頂部的距離需要使用style.top屬性。
offsetLeft:當(dāng)前對(duì)象到其上級(jí)層左邊的距離.。不能對(duì)其進(jìn)行賦值,設(shè)置對(duì)象到父對(duì)象左邊的距離需要使用style.left屬性。
這里要注意offsetTop與style.top的區(qū)別(offsetLeft與style.left也是一樣的道理):
•offsetTop返回的是數(shù)字,而style.top返回的是字符串,除了數(shù)字外還帶有單位:px,通常需要使用parseInt轉(zhuǎn)換成數(shù)值。
•offsetTop只讀,而style.top可讀寫。
•如果沒有給HTML元素指定過top樣式,則style.top返回的是空字符串。
注意:在FireFox中,給style.top賦值的時(shí)候,也要是字符串(帶px)這種形式。
(2)CSS中position屬性對(duì)位置的影響
position默認(rèn)的屬性值都是static,靜態(tài)。但是position中最關(guān)鍵的屬性值是relative(相對(duì))以及absolute(絕對(duì))。
往往我們會(huì)把a(bǔ)bsolute屬性與left、top配合起來制作相關(guān)的“懸浮層”效果。然而有時(shí)候我們需要針對(duì)某一個(gè)容器的懸浮效果,而不是針對(duì)窗口的。這時(shí)候通過高度、寬度的計(jì)算不但麻煩,而且?guī)缀鯚o法完美實(shí)現(xiàn)效果。其實(shí)只要把其上一級(jí)的樣式屬性position設(shè)置為relative就可以了。也就是說,position的屬性值的效果,直接受其容器樣式中position屬性值影響。例如如下A-B的嵌套結(jié)構(gòu)
復(fù)制代碼
代碼如下:<divid="A">
<divid="B">
</div>
</div>
當(dāng)A的position為relative時(shí),B的position為absolute才有效。這時(shí)候left:0、top:0就不再針對(duì)窗口文檔,而是針對(duì)id為A的這個(gè)div了。但是如果你在A中的padding="50px",在A中的其他沒有設(shè)置postion為absolute的會(huì)隨著A的padding的值而變化,但是B不會(huì)變的它的position是相對(duì)上一級(jí)的。
這里再稍微啰嗦一下position的四個(gè)屬性值:relative,absolute,fixed,static。還是以上面的代碼為例:
relative
relative值意味著元素要根據(jù)它本身的位置進(jìn)行相對(duì)的偏移。例如在上面的代碼中,如果設(shè)定B設(shè)置了relative值,比如設(shè)置如下CSS代碼:
復(fù)制代碼
代碼如下:#B{
position:relative;
padding:5px;
top:5px;
left:5px;
}
我們可以這樣理解,如果不設(shè)置relative屬性,B的位置按照正常的文檔流,它應(yīng)該處于某個(gè)位置。但當(dāng)設(shè)置B的position為relative后,將根據(jù)top,right,bottom,left的值按照它理應(yīng)所在的位置進(jìn)行偏移,relative的“相對(duì)的”意思也正體現(xiàn)于此。
注意:relative的偏移是基于對(duì)象的margin的左上側(cè)的。
absolute
這個(gè)屬性總是有人給出誤導(dǎo)。說當(dāng)position屬性設(shè)為absolute后,總是按照瀏覽器窗口來進(jìn)行定位的,這其實(shí)是錯(cuò)誤的。實(shí)際上,這是fixed屬性的特點(diǎn)。
當(dāng)B的position設(shè)置為absolute后,其到底以誰為對(duì)象進(jìn)行偏移呢?這里分為兩種情況:
•當(dāng)B的父對(duì)象(或曾祖父,只要是父級(jí)對(duì)象)parent也設(shè)置了position屬性,且position的屬性值為absolute或者relative時(shí),也就是說,不是默認(rèn)值的情況,此時(shí)B按照這個(gè)parent來進(jìn)行定位。
•當(dāng)B不存在一個(gè)有著position屬性的父對(duì)象,那么那就會(huì)以body為定位對(duì)象,按照瀏覽器的窗口進(jìn)行定位,這個(gè)比較容易理解。
fixed
fixed是特殊的absolute,即fixed總是以body為定位對(duì)象的,按照瀏覽器的窗口進(jìn)行定位。
static
position的默認(rèn)值,一般不設(shè)置position屬性時(shí),會(huì)按照正常的文檔流進(jìn)行排列。
(3)Jquery方式
提示類彈出框是常見的一種方式,這個(gè)任務(wù)最重要的是計(jì)算彈出框的位置。通過事件對(duì)象獲取到事件源,然后可以使用offset()函數(shù)計(jì)算事件源相對(duì)于document的位置:
復(fù)制代碼
代碼如下:vartop=$(event.target).offset().top;
varleft=$(event.target).offset().left;
因?yàn)槭窍鄬?duì)于document,即頁面左上角的位置,所以需要將彈出層放在Body元素中的第一層,即父類就是body。如果包含在其他元素中,需要確定任何一個(gè)父類的position樣式設(shè)置為了relative。計(jì)算出來的top和left是事件源的位置,在此位置顯示會(huì)將事件源對(duì)象遮蓋住。所以通常需要手工做一些偏移,比如top+20。
5.隱藏div元素
css中隱藏元素可以有兩種方式:display:none或者visibility:hidden。兩種方式的不同之處在于設(shè)置display的值后元素完全隱藏,元素所占的位置也沒有了,下面的元素上移。設(shè)置visibility后元素所占的位置還在,就是看不見。
6.div的子元素橫排,豎排
使用float屬性控制。div默認(rèn)是豎排的,寬度是100%,CSS中設(shè)置float:left以后就變成橫排了。如果想從橫排中間斷開,后面的還原成豎排,則需要使用clear:both修改??聪旅娴睦樱?
復(fù)制代碼
代碼如下:<div>
<divstyle="float:left">aaaaaaaaaaaaaa</div>
<divstyle="float:left">bbbbbbbbbbbbbb</div>
以上這兩個(gè)div就是橫向排列。
<divstyle="clear:both"></div>這個(gè)東西很重要,它清除上兩個(gè)層的浮動(dòng),也就是說以下的層就繼續(xù)垂直排列了。
<div>這個(gè)層就垂直排列了</div>
<div>這個(gè)層就垂直排列了</div>
</div>
上面只是float屬性的一個(gè)簡(jiǎn)單應(yīng)用。
float屬性主要是用于控制元素的流向,也就是向右靠攏,還是向左靠攏。這里看一下float屬性的語法:
復(fù)制代碼
代碼如下:float:none|left|right
none:默認(rèn)值。對(duì)象不飄浮
left:文本流向?qū)ο蟮挠疫?
right:文本流向?qū)ο蟮淖筮?
為了達(dá)到某些效果,通常我們需要在某個(gè)時(shí)候取消浮動(dòng)以免對(duì)別的對(duì)象造成影響,這是通過上面介紹過的那個(gè)clear屬性實(shí)現(xiàn)的:
clear屬性有四個(gè)值:
復(fù)制代碼
代碼如下:clear:both|left|right|none;
簡(jiǎn)單來說呢,clear屬性的作用就是“清除”浮動(dòng)。如果某元素設(shè)置clear:left;表示該元素左邊不存在浮動(dòng)元素;相應(yīng)的,clear:right;表示該元素右邊不存在浮動(dòng)元素;clear:both;表示該元素兩邊都不存浮動(dòng)元素。clear:none表示兩邊允許有浮動(dòng)元素。
7.設(shè)置div中文字的字體
先看一下CSS中控制文本的屬性列表:
復(fù)制代碼
代碼如下:Word-spacing:定義了各個(gè)單詞之間的間距,取值:Normal|<length>。
Letter-spacing:定義了每個(gè)字母之間的間距,取值:Normal|<length>。
Text-decoration:定義文字的“裝飾”樣式,取值范圍:None|underline|overline|line-through|blink。
Vertical-align:定義了元素在垂直方向上的位置,取值:Baseline|sub|super|top|text-top|middle|bottom|text-bottom|<percentage>。
text-transform:使文本轉(zhuǎn)換為其它形式,取值:Capitalize|uppercase|lowercase|none。
Text-align:定義了文字的對(duì)齊方式,取值:Left|right|center|justify。
Text-indent:定義了文本的首行的縮進(jìn)方式,取值:<length>|<percentage>。
Line-height:定義了文本的行高,取值:Normal|<number>|<length>|<percentage>。
我們可以從上面看到在這里可以定義文本的文字間距、字母間距、裝飾、對(duì)齊方式、縮進(jìn)方式和行高等屬性。舉個(gè)例子來看看吧:
復(fù)制代碼
代碼如下:<pstyle="letter-spacing:5px;text-align:justify;text-indent:4em;line-height:17pt">我們看到經(jīng)過文本屬性處理的文本字與字之間多了間距,行與行之間多了行高,對(duì)齊方式變成了兩端對(duì)齊,并且段首又多縮進(jìn)了兩格。</p>
letter-spacing設(shè)置了字間距為5px,其中5px為一個(gè)長度單位;text-align設(shè)置了對(duì)齊方式為兩端對(duì)齊;indent設(shè)置了縮進(jìn)格為4em;line-height設(shè)置了行高為17pt。從上面的例子,我們可以看出利用CSS的文本屬性可以方便的對(duì)頁面中的文本進(jìn)行排版。
行間距取決于字體的大小,一般來說,小的字號(hào)需要大一點(diǎn)的行間距來便于閱讀,中文字體在網(wǎng)頁上如果沒有行間距的設(shè)定,對(duì)于閱讀大段文字來說是讀者的災(zāi)難,所以適當(dāng)設(shè)定line-height是非常必要的。一般地,line-height在網(wǎng)頁設(shè)計(jì)中應(yīng)該是字體大小的1.5倍到2倍。Word和其它的文本編輯軟件里,一般設(shè)定字體的120%作為缺省的行間距。css里的line-height設(shè)定,是均分后加在每一行的上下,也就是說,如果line-height設(shè)定為20px的話,那么每一行文字的上下各有10px的間距。
8.設(shè)置div的tooltip分行顯示
在html種對(duì)于鏈接和圖片,我們可以通過添加title屬性以顯示一些說明文字,一般情況下,這些文字都是顯示成一行,那么有沒有辦法讓它以多行的方式顯示呢?解決的方法有兩種:
(1).將title屬性分成幾行來寫,例如:
復(fù)制代碼
代碼如下:<ahref=#"title="說明一
說明二
說明三">建站學(xué)</a>
(2).第一行相對(duì)來說不夠直觀,我們還可以在需換行的地方添加 (&為半角)或 來實(shí)現(xiàn):
復(fù)制代碼
代碼如下:<ahref=#"title="說明一 說明二 說明三">建站學(xué)</a>
<ahref=#"title="說明一 說明二 說明三">建站學(xué)</a>
9.鼠標(biāo)中鍵控制水平滾動(dòng)條
在Chrome和FireFox中,一般都是鼠標(biāo)中鍵控制垂直滾動(dòng)條,如果你的DIV只有水平控制條,默認(rèn)情況下,鼠標(biāo)中鍵是不起滾動(dòng)作用的,這個(gè)時(shí)候需要自己實(shí)現(xiàn)。
首先,掛接鼠標(biāo)滾輪事件:
復(fù)制代碼
代碼如下://MousewheeleventforNonFireFox
element.onmousewheel=fireElementScrolled;
//MousewheeleventforFireFox
element.addEventListener('DOMMouseScroll',fireElementScrolled,false);
這里FireFox的特殊一點(diǎn),需要使用addEventListener這種方式掛接。
然后,實(shí)現(xiàn)fireElementScrolled方法:
復(fù)制代碼
代碼如下:fireElementScrolled=function(event){
varrolled=0;
if(event.wheelDelta){
rolled=event.wheelDelta;
}
else{
//Firefox:需要處理一下下
rolled=-event.detail*30;
}
varhtmlElement=document.getElementById('test');
htmlElement.scrollLeft=htmlElement.scrollLeft-rolled;
event.preventDefault();
returnfalse;
};
原理很簡(jiǎn)單,就是拿到滾輪滾動(dòng)的距離,處理后給div元素的scrollLeft屬性賦值即可。
10.子元素居中
(1)水平居中
普通的文字和圖片居中很好辦,設(shè)置父容器的CSS樣式包含text-align:center;即可。
當(dāng)子元素是DIV等元素的情況稍微復(fù)雜一點(diǎn),以子元素為div為例,如果只有一個(gè)子div,則可以通過設(shè)置子元素的CSS樣式包含margin:0auto;實(shí)現(xiàn)居中。例如下面的例子:
復(fù)制代碼
代碼如下:<divid="a"style="width:400px;height:300px;border:1pxsolidgreen;">
<divid="b"style="margin:0auto;width:200px;border:1pxsolidblue;">簡(jiǎn)單的一個(gè)子DIV居中問題</div>
</div>
如果含有多個(gè)子元素,我通常是多加一層div來實(shí)現(xiàn),看例子:
復(fù)制代碼
代碼如下:<divstyle="width:400px;height:300px;border:1pxsolidred;">
<divstyle="margin:0auto;position:relative;left:50%;float:left;">
<divstyle="position:relative;left:-50%;float:left">
<divstyle="border:1pxsolidblue;text-align:center;">1</div>
<divstyle="border:1pxsolidblue;text-align:center;">2</div>
<divstyle="border:1pxsolidblue;text-align:center;">3</div>
<divstyle="border:1pxsolidblue;float:left;">4</div>
<divstyle="border:1pxsolidblue;float:left;">5</div>
<divstyle="border:1pxsolidblue;float:left;">6</div>
</div>
</div>
</div>
(2)垂直居中
垂直居中麻煩一點(diǎn),有一種做法很簡(jiǎn)單,可以同時(shí)實(shí)現(xiàn)水平和垂直居中。首先給父元素寫上positon:relative,這么做是為了給子元素打上position:absolute的時(shí)候不會(huì)被定位到外面去。接下去,寫上子元素的height和width,某些瀏覽器在解析的時(shí)候如果沒有這2個(gè)值的話會(huì)出現(xiàn)意想不到的錯(cuò)位。接著就是整個(gè)方法的核心,給子元素再打上top:50%;left:50%以及margin-top:一半的height值的的負(fù)數(shù);margin-left:一半的weight值的負(fù)數(shù)。當(dāng)然,這里父元素也要先寫上width和height??蠢樱?
復(fù)制代碼
代碼如下:<divstyle="width:600px;height:300px;position:absolute;top:50%;left:50%;margin-top:-150px;margin-left:-300px;border:1pxsolidred;">居中方法</div>
相關(guān)文章
- 想讓div擁有滾動(dòng)條可以直接為div指定overflow屬性但必須指定div的高度,下面有個(gè)示例,大家可以參考下2014-02-13
- 使用CSS樣式設(shè)置div滾動(dòng)條,直接充當(dāng)了文本框的角色,下面為大家介紹下具體的實(shí)現(xiàn),感興趣的朋友可以參考下2013-12-24
css將div層固定顯示在頁面底部不隨滾動(dòng)條滾動(dòng)
將div層固定顯示在頁面底部,在某些情況下還是很實(shí)用的,在本文為大家介紹下使用css是如何實(shí)現(xiàn)的,需要的碰可以參考下2013-11-20div模擬滾動(dòng)條當(dāng)div寬度小于18時(shí)滾動(dòng)條不滾動(dòng)
IE瀏覽器下使用div模擬滾動(dòng)條當(dāng)div寬度小于18時(shí)滾動(dòng)條不滾動(dòng),具體的實(shí)現(xiàn)代碼如下,需要的朋友可以參考下2013-11-07給DIV添加滾動(dòng)條的實(shí)現(xiàn)代碼
有時(shí)候我們需要為div加滾動(dòng)條,那么就可以參考下面的代碼2013-05-03給div加滾動(dòng)條 div顯示滾動(dòng)條設(shè)置代碼
div加滾動(dòng)條在前端的網(wǎng)頁布局中為了達(dá)到類似textarea的效果采取的一種方式,下面提供了幾種設(shè)置方法,需要注意的是直接為div指定overflow屬性為auto即可,但是必須指定div2013-04-25css實(shí)現(xiàn)div自動(dòng)添加滾動(dòng)條(圖片或文字等超出時(shí)顯示)
css實(shí)現(xiàn)div自動(dòng)添加滾動(dòng)條比較實(shí)用的功能,當(dāng)圖片或文字超出div所規(guī)定的寬或高時(shí),會(huì)自動(dòng)出現(xiàn)滾動(dòng)條,這一點(diǎn)還是比較有利于用戶體驗(yàn)的,本文整理了一些實(shí)現(xiàn)自動(dòng)滾動(dòng)條的方2013-01-25div css 滾動(dòng)條樣式 DIV滾動(dòng)條屬性及樣式設(shè)置方式
所謂DIV滾動(dòng)條,就是利用DIV標(biāo)簽,在里面嵌入CSS樣式表,加入overflow的屬性值,這樣,當(dāng)div所規(guī)范的區(qū)域內(nèi)的內(nèi)容達(dá)到一定程序時(shí),滾動(dòng)條就派上用場(chǎng),這里為你介紹DIV滾動(dòng)條2012-12-23FireFox火狐瀏覽器與IE兼容問題 - 透明濾鏡 DIV滾動(dòng)條
IE與火狐瀏覽器兼容相關(guān)問題集錦,做網(wǎng)站的朋友可以參考下。2010-12-25DIV 自動(dòng)滾動(dòng)功能及滾動(dòng)條顏色修改的代碼
本文給大家分享div自動(dòng)滾動(dòng)功能及滾動(dòng)條顏色的核心代碼,代碼簡(jiǎn)單易懂,非常不錯(cuò)具有參考借鑒價(jià)值,感興趣的朋友一起看看吧2016-11-04