作為最常用的布局元素，DIV在Web開發(fā)中起著至關重要的作用。這里總結一下我在使用DIV中遇到的各種操作。
1.div顯示滾動條
這個是很常見的一個任務了，基本是通過CSS去實現(xiàn)滾動條。
(1)垂直滾動條
設置是否顯示滾動條主要是在CSS中設置下列的屬性：


參數(shù)的意義：
visible:　不剪切內(nèi)容也不添加滾動條。假如顯式聲明此默認值，對象將被剪切為包含對象的window或frame的大小。并且clip屬性設置將失效。
auto:　此為body對象和textarea的默認值。在需要時剪切內(nèi)容并添加滾動條
hidden:　不顯示超過對象尺寸的內(nèi)容
scroll:　總是顯示滾動條
overflow:auto;這個表示當你內(nèi)容超過div高度出現(xiàn)垂直的滾動條
所以我們想在需要的時候顯示垂直的滾動條，可以這么實現(xiàn)：


或者


(2)水平滾動條
如果只想出現(xiàn)水平的滾動條，一般還要配合禁止換行的設置，例如：


(3)滾動條的外觀
在IE中，主要是使用各種顏色屬性：


在Chrome中，基本上是使用webkit專用屬性設置：


2.禁止div的事件冒泡
這個基本上都是使用標準的event.stopPropagation()方法阻止事件冒泡，當然IE除外：


3.禁止div執(zhí)行默認的行為
這個其實是一個普遍的問題，對于具有默認行為的元素，比如提交按鈕的提交表單行為,，<a>元素的超鏈接行為等，我們?nèi)绻谶@些元素上應用事件，同時也往往希望取消它們的默認行為，這個通過在事件的回調函數(shù)中調用event.preventDefault();實現(xiàn)。
4.動態(tài)計算div的位置(比如常見的計算div彈出層的位置)
(1)DOM屬性方式
offsetTop：當前對象到其上級層頂部的距離。不能對其進行賦值，設置對象到父對象頂部的距離需要使用style.top屬性。
offsetLeft：當前對象到其上級層左邊的距離.。不能對其進行賦值，設置對象到父對象左邊的距離需要使用style.left屬性。
這里要注意offsetTop與style.top的區(qū)別(offsetLeft與style.left也是一樣的道理)：
•offsetTop返回的是數(shù)字，而style.top返回的是字符串，除了數(shù)字外還帶有單位：px，通常需要使用parseInt轉換成數(shù)值。
•offsetTop只讀，而style.top可讀寫。
•如果沒有給HTML元素指定過top樣式，則style.top返回的是空字符串。
注意：在FireFox中，給style.top賦值的時候，也要是字符串(帶px)這種形式。
(2)CSS中position屬性對位置的影響
position默認的屬性值都是static，靜態(tài)。但是position中最關鍵的屬性值是relative（相對）以及absolute（絕對）。
往往我們會把absolute屬性與left、top配合起來制作相關的“懸浮層”效果。然而有時候我們需要針對某一個容器的懸浮效果，而不是針對窗口的。這時候通過高度、寬度的計算不但麻煩，而且?guī)缀鯚o法完美實現(xiàn)效果。其實只要把其上一級的樣式屬性position設置為relative就可以了。也就是說，position的屬性值的效果，直接受其容器樣式中position屬性值影響。例如如下A-B的嵌套結構


當A的position為relative時，B的position為absolute才有效。這時候left:0、top:0就不再針對窗口文檔，而是針對id為A的這個div了。但是如果你在A中的padding="50px"，在A中的其他沒有設置postion為absolute的會隨著A的padding的值而變化，但是B不會變的它的position是相對上一級的。
這里再稍微啰嗦一下position的四個屬性值：relative，absolute，fixed，static。還是以上面的代碼為例：
relative
relative值意味著元素要根據(jù)它本身的位置進行相對的偏移。例如在上面的代碼中，如果設定B設置了relative值，比如設置如下CSS代碼：


我們可以這樣理解，如果不設置relative屬性，B的位置按照正常的文檔流，它應該處于某個位置。但當設置B的position為relative后，將根據(jù)top，right，bottom，left的值按照它理應所在的位置進行偏移，relative的“相對的”意思也正體現(xiàn)于此。
注意：relative的偏移是基于對象的margin的左上側的。
absolute
這個屬性總是有人給出誤導。說當position屬性設為absolute后，總是按照瀏覽器窗口來進行定位的，這其實是錯誤的。實際上，這是fixed屬性的特點。
當B的position設置為absolute后，其到底以誰為對象進行偏移呢？這里分為兩種情況：
•當B的父對象(或曾祖父，只要是父級對象)parent也設置了position屬性，且position的屬性值為absolute或者relative時，也就是說，不是默認值的情況，此時B按照這個parent來進行定位。
•當B不存在一個有著position屬性的父對象，那么那就會以body為定位對象，按照瀏覽器的窗口進行定位，這個比較容易理解。
fixed
fixed是特殊的absolute，即fixed總是以body為定位對象的，按照瀏覽器的窗口進行定位。
static
position的默認值，一般不設置position屬性時，會按照正常的文檔流進行排列。
(3)Jquery方式
提示類彈出框是常見的一種方式，這個任務最重要的是計算彈出框的位置。通過事件對象獲取到事件源,然后可以使用offset()函數(shù)計算事件源相對于document的位置：


因為是相對于document，即頁面左上角的位置，所以需要將彈出層放在Body元素中的第一層，即父類就是body。如果包含在其他元素中，需要確定任何一個父類的position樣式設置為了relative。計算出來的top和left是事件源的位置，在此位置顯示會將事件源對象遮蓋住。所以通常需要手工做一些偏移，比如top+20。
5.隱藏div元素
css中隱藏元素可以有兩種方式：display:none或者visibility:hidden。兩種方式的不同之處在于設置display的值后元素完全隱藏，元素所占的位置也沒有了，下面的元素上移。設置visibility后元素所占的位置還在，就是看不見。
6.div的子元素橫排，豎排
使用float屬性控制。div默認是豎排的，寬度是100%，CSS中設置float:left以后就變成橫排了。如果想從橫排中間斷開，后面的還原成豎排，則需要使用clear:both修改?？聪旅娴睦樱?


上面只是float屬性的一個簡單應用。
float屬性主要是用于控制元素的流向，也就是向右靠攏，還是向左靠攏。這里看一下float屬性的語法：


為了達到某些效果，通常我們需要在某個時候取消浮動以免對別的對象造成影響，這是通過上面介紹過的那個clear屬性實現(xiàn)的：
clear屬性有四個值：


簡單來說呢，clear屬性的作用就是“清除”浮動。如果某元素設置clear:left;表示該元素左邊不存在浮動元素；相應的，clear:right;表示該元素右邊不存在浮動元素；clear:both;表示該元素兩邊都不存浮動元素。clear:none表示兩邊允許有浮動元素。
7.設置div中文字的字體
先看一下CSS中控制文本的屬性列表：


我們可以從上面看到在這里可以定義文本的文字間距、字母間距、裝飾、對齊方式、縮進方式和行高等屬性。舉個例子來看看吧：


letter-spacing設置了字間距為5px，其中5px為一個長度單位；text-align設置了對齊方式為兩端對齊；indent設置了縮進格為4em；line-height設置了行高為17pt。從上面的例子，我們可以看出利用CSS的文本屬性可以方便的對頁面中的文本進行排版。
行間距取決于字體的大小，一般來說，小的字號需要大一點的行間距來便于閱讀，中文字體在網(wǎng)頁上如果沒有行間距的設定，對于閱讀大段文字來說是讀者的災難，所以適當設定line-height是非常必要的。一般地，line-height在網(wǎng)頁設計中應該是字體大小的1.5倍到2倍。Word和其它的文本編輯軟件里，一般設定字體的120%作為缺省的行間距。css里的line-height設定，是均分后加在每一行的上下，也就是說，如果line-height設定為20px的話，那么每一行文字的上下各有10px的間距。
8.設置div的tooltip分行顯示
在html種對于鏈接和圖片，我們可以通過添加title屬性以顯示一些說明文字，一般情況下，這些文字都是顯示成一行，那么有沒有辦法讓它以多行的方式顯示呢？解決的方法有兩種：
(1).將title屬性分成幾行來寫，例如：


(2).第一行相對來說不夠直觀，我們還可以在需換行的地方添加&#10;（&為半角)或&#13;來實現(xiàn)：


9.鼠標中鍵控制水平滾動條
在Chrome和FireFox中，一般都是鼠標中鍵控制垂直滾動條，如果你的DIV只有水平控制條，默認情況下，鼠標中鍵是不起滾動作用的，這個時候需要自己實現(xiàn)。
首先，掛接鼠標滾輪事件：


這里FireFox的特殊一點，需要使用addEventListener這種方式掛接。
然后，實現(xiàn)fireElementScrolled方法：


原理很簡單，就是拿到滾輪滾動的距離，處理后給div元素的scrollLeft屬性賦值即可。
10.子元素居中
(1)水平居中
普通的文字和圖片居中很好辦，設置父容器的CSS樣式包含text-align:center;即可。
當子元素是DIV等元素的情況稍微復雜一點，以子元素為div為例，如果只有一個子div，則可以通過設置子元素的CSS樣式包含margin:0auto;實現(xiàn)居中。例如下面的例子：


如果含有多個子元素，我通常是多加一層div來實現(xiàn)，看例子：


(2)垂直居中
垂直居中麻煩一點，有一種做法很簡單，可以同時實現(xiàn)水平和垂直居中。首先給父元素寫上positon:relative，這么做是為了給子元素打上position:absolute的時候不會被定位到外面去。接下去，寫上子元素的height和width，某些瀏覽器在解析的時候如果沒有這2個值的話會出現(xiàn)意想不到的錯位。接著就是整個方法的核心，給子元素再打上top:50%;left:50%以及margin-top:一半的height值的的負數(shù);margin-left:一半的weight值的負數(shù)。當然，這里父元素也要先寫上width和height。看例子：

最新評論