第十三章 CSS定位.ppt

第十三章CSS定位 本章內(nèi)容 13 1CSS定位概述13 2CSS浮動與清除13 3DIV CSS導(dǎo)航 13 1CSS定位概述 CSS定位 Positioning 屬性允許你對元素進(jìn)行定位 定位的基本思想很簡單 它允許你定義元素框相對于其正常位置 應(yīng)該出現(xiàn)的位置 或者相對于父元素 另一個元素甚至瀏覽器窗口本身的位置 另一方面 CSS1中首次提出了浮動 它以Netscape在Web發(fā)展初期增加的一個功能為基礎(chǔ) 浮動不完全是定位 一切皆為框 div hn或p元素常常被稱為塊級元素 這意味著這些元素顯示為一塊內(nèi)容 即 塊框 與之相反 span strong font等元素稱為 行內(nèi)元素 這是因為它們的內(nèi)容顯示在行中 即 行內(nèi)框 通過將display屬性設(shè)置為block 可以讓行內(nèi)元素 比如元素 表現(xiàn)得像塊級元素一樣 還可以通過把display設(shè)置為none 讓生成的元素根本沒有框 這樣的話 該框及其所有內(nèi)容就不再顯示 不占用文檔中的空間 Div與Span 標(biāo)記 定義網(wǎng)頁上的一個塊級元素 標(biāo)記 定義網(wǎng)頁中某一行內(nèi) 內(nèi)聯(lián) 元素 display屬性 常用值 CSS定位機(jī)制 CSS有三種基本的定位機(jī)制 普通流 浮動和絕對定位 除非專門指定 否則所有框都在普通流中定位 也就是說 普通流中的元素的位置由元素在 X HTML中的位置決定 塊級框從上到下一個接一個地排列 框之間的垂直距離是由框的垂直外邊距計算出來 行內(nèi)框在一行中水平布置 可以使用水平內(nèi)邊距 邊框和外邊距調(diào)整它們的間距 但是 垂直內(nèi)邊距 邊框和外邊距不影響行內(nèi)框的高度 由一行形成的水平框稱為行框 LineBox 行框的高度總是足以容納它包含的所有行內(nèi)框 不過 設(shè)置行高可以增加這個框的高度 CSS定位屬性 position屬性 position屬性規(guī)定元素的定位類型 position屬性定義建立元素布局所用的定位機(jī)制 任何元素都可以定位 不過絕對或固定元素會生成一個塊級框 而不論該元素本身是什么類型 基本語法 selector position value position屬性值 top right bottom left屬性 top right bottom left屬性 分別定義了定位元素上 右 下 左外邊距邊界與其包含塊上 右 下 左邊界之間的偏移 基本語法 selector position value top right bottom left value 可能的值 auto默認(rèn)值 通過瀏覽器計算右邊緣的位置 設(shè)置以包含元素的百分比計的右邊位置 可使用負(fù)值 length使用px cm等單位設(shè)置元素的右邊位置 可使用負(fù)值 z index屬性 z index屬性設(shè)置元素的堆疊順序 擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面 注意 元素可擁有負(fù)的z index屬性值 注意 Z index僅能在定位元素上奏效 例如position absolute 基本語法 selector position value z index value 13 2CSS浮動與清理 在CSS中 通過float屬性實現(xiàn)元素的浮動 在CSS中 通過clear屬性實現(xiàn)元素的清理 CSS浮動 float屬性定義元素在哪個方向浮動 任何元素都可以浮動 浮動元素會生成一個塊級框 而不論它本身是何種元素 基本語法 selector float value 可能的值 left元素向左浮動 right元素向右浮動 none默認(rèn)值 元素不浮動 并會顯示在其在文本中出現(xiàn)的位置 CSS清理 clear屬性規(guī)定元素的哪一側(cè)不允許其他浮動元素 基本語法 selector clear value 可能的值 left在左