CSS專題（二）：元素大小與位置offsetLeft offsetTop offsetWidth offsetHeight clientWidth clientHeight scrollWidth s

　　這是一些極易混淆的概念。仔細分析，這些值都是用來對元素進行定位的，下面逐一介紹。本文只介紹width,left等值，與其對應的是 height,top。本文還只介紹在Firefox下的表現，我認為，先不要考慮在IE各版本，Chrome等瀏覽器下的表現，這樣一來，問題就單純 了，容易理解。

一 寬度的基礎

　　何為寬度，在CSS中，width屬性指元素內容區的 寬度，並不是元素在頁面上所佔的空間，就像windows上的一個檔案，10M大小，但所佔空間可能達到12M；又像一幅國畫，真正作畫寫字的地方並不是 畫紙的全部。所以，這裡至少有兩個概念：元素內容區寬度，元素所佔寬度。在Firefox中，內容區寬度即width指定；元素所佔寬度包含內容區寬度和 內邊距，以及邊框的寬度。從這裡也能理解padding沒有負值的原因，否則內容會超出邊框。所以會出現以下的現象，隨著padding值的增大，內容區 寬度不會改變，而元素所佔的寬度會增大。也可以因此理解為何background屬性總是作用在width加上padding的總寬度上。

　　那麼，外邊距margin是個什麼概念，有什麼作用呢。margin本意頁邊，是個定位的概念。margin已經和元素所佔寬度沒有任何關係了，只是讓元素與周圍元素產生距離。於是，可以有一個小總結：padding是一個元素所佔大小的概念，margin是個定位的概念。

二 位移量 Offset

　　偏 移量是個元素相對元素的概念。所謂位移，總是要相對某個位置位移，比與A(5，0)可以認為是A點相對於原點向X軸正方向的位移，位移量為5個單位。那 麼，元素相對於誰便宜呢？這點與絕對位置非常相似，元素相對於其父元素位移，而其父元素必須滿足定位屬性不為static，即positon為 relative,absolute,fixed即可。並且，如果父元素不滿足，則向祖先尋找，最終可以是body。

　　這樣就可以理解offsetLeft屬性了，offsetLeft表達的是元素所佔地區的左邊緣到父元素的左邊緣。寫成CSS的語言就是:

　　offsetLeft:元素的左外邊框到包含元素的左內邊框的像素距離。

　　

　　所以，元素的padding會影響到offsetLeft,margin不會。而元素的父元素的padding不會影響到當前元素的offsetLeft，父元素的margin會影響。

　　順便說明一個問題，如何確定一個元素到視窗左邊界的距離呢，這是非常有用的資料。如果用offsetLeft來確定，只能是其與父級的左邊界的距離，可以通過迭代的方式擷取。我們一般通過jQuery來直接擷取，即：$("#id").offset().left。

　　那麼，如何理解offsetWidth呢，確實不好理解，只能想象成，元素的作為位移時，元素所佔內容區的大小。CSS語言即：

　　offsetWidth：元素在水平方向所佔空間大小，即元素寬度，（可見的）水平捲軸的寬度，內邊距，邊框等四者的總和。

　　

　　offsetWidth是一個經常使用的值，該值真實的反映了元素所佔空間的大小，而width，height屬性僅僅表達了內容區。

三 客戶區 Client
　　客戶區，顧名思義，就是使用者可操作區的大小。在一個windows視窗中，客戶區又是工作區，其實就是使用者可以看到的，並且能利用
的地區。在瀏覽器中，客戶區表達了元素可以渲染的地區，顯然，這個地區就是元素所佔空間，但是邊框和捲軸是不算的，所以客戶區大小的內容區大小加上內邊 距。故clientWidth與offsetWidth的差別就是在於邊框與捲軸上。用CSS語言表達即：

　　clientWidth:元素內容區寬度和內邊距的總和。

　　   

　　clientWidth的意義主要體現在document元素上，document.clientWidth真實的反映了視窗的大小。

四 滾動大小 Scroll

　　滾動有關的屬性都因捲軸而起。捲軸是常見的延長顯示策略，也是電子媒體特有的優勢。瀏覽器必須考慮捲軸本身的高度和寬頻，於是便出現了scrollWidth,scrollLeft等屬性，以支援對捲軸高寬的控制。

　　由於滾動相關屬性都是為捲軸而設計，那麼，在沒有滾動時，這些屬性將失去意義，可不必考慮，或用其他屬性代替。

　 　scrollWidth是滾動寬度，當出現了橫向捲軸，元素真實的寬度是看不出來的，此時元素在頁面上所佔據的寬度依然是offsetWidth，而 其整個內容區的寬度會因為出現了捲軸而遮住。此時，為了得到元素內容的真實大小，就需要用scrollWidth,就像是將滾動的內容全部鋪開，此時呈 現出來的寬度就是scrollWidth，而不包含邊框和y軸捲軸的寬度，就像是鋪開的clientWidth。用CSSy語言表達即：

　　scrollWidth:元素內容的總寬度，或鋪開的寬度。

　　

　　scrollLeft表達了因為滾動而隱藏的寬度，這是個有用的屬性，在製作滾動圖片時很有用。用CSS的語言表達即：

　　scrollLeft:因水平捲軸而隱藏的寬度。

　　

　　本文樣本：http://www.zangb.com/html/demo/css/css_positionAndDis.html

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　方勁松 南京焦點科技 寫於鼓樓清涼山