第14課 元素的定位

2022-03-22 13:23:21 字數 1359 閱讀 4172

css定位令你可以將乙個元素精確地放在頁面上你所指定的地方。聯合使用定位與浮動(參見第13課),你將能夠建立多種高 級而精確的布局。

本課我們將討論以下內容:

把瀏覽器視窗想象成乙個座標系統:

css定位的原理是:你可以將任何盒子(box)放置在座標系統的任何位置上。

假設我們要放置乙個標題。通過使用盒狀模型(參見第9課),標題將顯示如下:

如果我們要把這個標題放置在距文件頂部100畫素、左邊200畫素的地方,我們可以在css中輸入以下**:

h1 

得到的顯示效果如下:

正如你所看到的,採用css定位技術來放置元素是非常精確的。相對於使用**、透明影象或其他方法而言,css定位要簡單得多。

乙個採用絕對定位的元素不獲得任何空間。這意味著:該元素在被定位後不會留下空位。

要對元素進行絕對定位,應將position屬性的值設為absolute。接著, 你可以通過屬性leftrighttopbottom來 設定將盒子放置在**。

舉個絕對定位的例子,假如我們要在文件的四個角落各放置乙個盒子:

#box1 

#box2

#box3

#box4

要對元素進行相對定位,應將position屬性的值設為relative。絕對定 位與相對定位的區別在於計算位置的方式。

採用相對定位的元素,其位置是相對於它在文件中的原始位置計算而來的。這意味著,相對定位是通過將元素從原來的 位置向右、向左、向上或向下移動來定位的。採用相對定位的元素會獲得相應的空間。

舉個相對定位的例子,我們可以相對於三張在頁面上的原始位置來對它們進行相對定位。注意這些將在文件中各自的原始位置處留下空位。

#dog1 

#dog2

#dog3

在以上兩課中,你學會了如何浮動和定位元素。這兩個方法可以令你在進行頁面布局時,放棄使用html**和透明影象這些過時的方法,而是取而代之以 css。css更為精確、更具優勢、並且更易於維護。

元素定位 14元素定位position

1 定義 position 屬性指定了元素的定位型別。這個屬性定義建立元素布局所用的定位機制。任何元素都可以定位,不過絕對或固定元素會生成乙個塊級框,而不論該元素本身是什麼型別。相對定位元素會相對於它在正常流中的預設位置偏移。元素可以使用的頂部,底部,左側和右側屬性定位。然而,這些屬性無法工作,除非...

python學習 第14課

1.將ga10.wms5.jd.com.txt中分別以upstream和location開頭的內容篩選出來,並分別生成相應的新文件 import codecs,re,os with codecs.open ga10.wms5.jd.com.txt r as f1 pattern1 re.compil...

c 第14課 list容器

list介紹 1 list是乙個雙向鍊錶容器,可高效地進行插入刪除元素。2 list不可以隨機訪問元素,所以不支援at.pos 函式與操作符。it ok it 5 err 3 include list物件的預設構造 list採用採用模板類實現,物件的預設構造形式 list lstt 如 list l...