DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 探究DIV定位單元的控制三大元素用法
探究DIV定位單元的控制三大元素用法
編輯:CSS詳解     

本文和大家重點討論一下DIV定位單元的控制,除了控制定位單元的左上角位置,你還可以控制單元的寬度和高度,及單元在頁面的可視性等內容。

DIV定位單元的控制

(width、height、visiblility)
除了控制定位單元的左上角位置,你還可以控制單元的寬度和高度,及單元在頁面的可視性。

DIV定位單元的寬度:

定位了的要素在頁面上顯示時仍然會從左到右一直顯示。利用寬度屬性就可以設定字符向右流動的限制,即設定要素的寬度。
DIV{position:absolute;left:200px;top:40px;width:150px}
浏覽器接到這項規則時,它將文字按照規則規定的效果顯示,還將段落的最大水平尺寸限制在150象素。
寬度屬性只適用於絕對定位的要素。你可以使用我們學過的任何一種長度單位,或使用比例值設定寬度,比例值指相對於母體要素的比例。IE4中,這項屬性還可用於圖像。你可以通過寬度設置人為地拉寬或壓縮圖像。

DIV定位單元的高度:

理論上講,高度應該和寬度的設置類似,只不過是在垂直方向上:
DIV{position:absolute;left:200px;top:40px;height:150px}
這裡我用了“理論上講”,因為有些浏覽器不支持高度屬性。

DIV定位單元的可視性:

利用CSS,你可以隱藏要素,使其在頁面上看不見。這條屬性對於定位了的和未定位的要素都適用。
H4{visibility:hidden}

選項:

visible使要素可以被看見
hidden使要素被隱藏
inherit指它將繼承母體要素的可視性設置。
值inherit為缺省值。這使單元繼承父單元的可見性。所以,如果某一段是隱藏的,則它包含的任何行間單元也都被隱藏。這一繼承性可被明確指定的可見性取代。例如,段內的EM單元被指定為可見,這時如果該段被隱藏,則段內的所有其它內容都將消失,而唯有EM單元中的文本是可見的。

當一個要素被隱藏後,它仍然要占據浏覽器窗口中的原有空間。所以,如果你將文字包圍在一幅被隱藏的圖像周圍,那麼,其顯示效果將是文字包圍著一塊空白區域。
這條屬性在編寫語言和使用動態Html時很有用,比如你可以使某段落或圖像只在鼠標滑過時才顯示。

【編輯推薦】

  1. DIV定位單元中三大元素的控制
  2. 學習筆記 DIV定位用法詳解
  3. CSS樣式表高效使用八大秘訣
  4. 創建和插入CSS樣式表秘笈
  5. 實現CSS垂直居中的五大方法及優缺點
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved