《CSS權威指南》學習記錄 定位(一)

2021-07-13 07:47:48 字數 4352 閱讀 7249

利用定位,可以準確地定義元素框相對於其正常位置應該出現在**,或者相對于父元素、另乙個元素甚至瀏覽器視窗本身的位置。

關鍵字:position。可接受:static(預設值)、relative、absolute、fixed。應用於所有元素。無繼承性。

static

元素框正常生成。

relative

元素框偏移某個距離。元素仍保持其未定位前的形狀,它原本所佔的空間仍保留。

absolute

元素框從文件流中完全刪除,並相對於其包含塊定位。元素原先在文件流中所佔的空間會被關閉,就好像該元素從來不存在一樣。元素定位後生成乙個塊級框,而不論原來它在正常流中生成何種型別的框。

fixed

表現類似於absolute,不過其包含塊是視窗本身。

在具體解釋之前,先要了解一下定位中的包含塊:

1、「根元素」的包含塊(又稱初始包含塊)由使用者**建立。大多數瀏覽器中,初始包含塊是乙個視窗大小的矩形。

2、對於非根元素,如果其position值是relative或static,包含塊則由最近的塊級框、表單元格或行內塊祖先框的內容邊界構成。

3、對於非根元素,如果其position值是absolute,則其包含塊設定為最近的position值不是static的祖先元素(可以是任何型別)。具體而言:

——如果這個祖先是塊級元素,包含塊則設定為該元素的內邊距邊界。

——如果這個祖先是行內元素,包含塊則設定為該元素的內容邊界。在從左向右讀的語言中,包含塊的上邊界和左邊界是該祖先元素中第乙個框內容區的上邊界和左邊界;包含塊的右邊界和下邊界是該祖先元素的最後乙個框內容區的右邊界和下邊界。

——如果沒有祖先,元素的包含塊定義為初始包含塊。

要注意的是,元素可以定位到包含塊的外邊。或許,將「包含塊」理解為「定位上下文」會更好一些。

上面的3種定位機制(absolute、fixed、relative)使用了4個屬性來描述定位元素各邊相對於其包含塊的偏移:top、right、bottom、left。可接受:auto(預設值)、長度值、百分值(對於top、bottom,相對於包含塊的高度;對於right、left,相對於包含塊的寬度)。應用於定位元素(也就是position值不是static的元素)。無繼承性。

這些屬性描述了距離包含塊最近邊的偏移。例如:top描述了定位元素上外邊距邊界距離包含塊的頂端多遠(可以為負值)。例如:填充乙個包含塊的右下角時要使用以下值:

可以用width和height分別設定定位元素的寬度和高度,但並不是必要的。例如,如果使用top、bottom、left、right來描述定位元素4個邊的位置,則其width和height將由這些偏移隱含確定。

上述例子中,儘管出現了width和height,但對元素的布局並沒有任何影響。

當然,如果增加了外邊距、邊框或內邊距,再為width和height顯式指定值,結果就不同了:

top

:0;bottom

:0;left

:0;right

:50%;

width

:50%;

height

:100%;

padding

:2em;

left

:0;right

:auto;

width

:75%;

max-width

:400px;

溢位假設由於某種原因,乙個元素的大小被固定,但內容在元素中放不下,就可以利用overflow解決。

關鍵字:overflow。可接受:visible(預設值)、hidden、scroll、auto。應用於塊級元素和替換元素。無繼承性。

visible表明元素的內容在元素框之外也可見:

如果overflow設定為scroll,則元素的內容會在元素框的邊界處剪裁——也就是說,溢位的內容將無法看到,但還是有辦法讓使用者得到額外的內容,比如使用滾動條:

要注意的是,如果使用scroll,則應當始終提供某種滾動機制,這會避免動態環境中滾動條出現或消失所帶來的問題。因此,即使元素有足夠的空間顯示內容,也應當顯示滾動條。

如果設定為hidden,則元素的內容會在元素框的邊界處剪裁,不過不會提供滾動條,剪裁的內容對使用者不可見。

設定為auto,意味著允許使用者**確定採用何種行為。

剪裁

如果overflow要求剪裁溢位的內容,可以使用clip改變剪裁區域的形狀。

關鍵字:clip。可接受:rect(top,right,bottom,left),auto(預設值)。應用於絕對定位元素。無繼承性。

auto表示元素的內容不應剪裁。

利用rect(top,right,bottom,left),可以相對於元素內容區定義乙個剪裁形狀。這不會改變內容區的形狀,只是改變將顯示內容的區域形狀。

要注意的是,rect(…)的值並不是邊偏移,而是距離元素左上角的距離。例如乙個剪裁矩形覆蓋元素左上角20x20畫素的乙個正方形,可以定義如下:

clip

:rect(0,20px,20px,0);

rect(…)只允許長度值和auto。如果設定為auto,相當於將剪裁邊界設定為適當的內容邊界。因此,下面兩例的效果是一樣的:

clip

:rect(0,0,10px,1em);

clip

:rect(auto,auto,10px,1em);

div

#sidebar

圖中的虛線只是為了顯示剪裁區域的邊界,並不會真的出現。

可以使用負長度值,不過並沒有什麼卵用:

可以超越下邊界和右邊界,但不能超越左邊界或上邊界:

文字沒有向右流,因為其行框的寬度仍受定位元素寬度的限制。(那高度呢?)

關鍵字:visibility。可接受:visible(預設值)、hidden、collapse。應用於所有元素。有繼承性。

如果元素設定為visibility:hidden,則元素不可見——元素仍在那裡,不過你看不見。

《CSS權威指南》學習記錄 浮動

關鍵字 float。可接受 left right none 預設值 適用於所有元素。無繼承性。乙個元素浮動時,其他元素會 圍繞 該元素。浮動元素不會與周圍元素發生外邊距合併。如果要浮動乙個非替換元素,則必須要為其宣告乙個width。讓乙個元素浮動,它會像塊級元素一樣擺放和表現,但本質不變。幾點規則 ...

《CSS權威指南》學習記錄 列表

咖啡li 茶li 牛奶li ul 列表項內部可以使用段落 換行符 鏈結以及其他列表等等。咖啡li 牛奶li 茶li ol 列表項內部可以使用段落 換行符 鏈結以及其他列表等等。自定義列表不僅僅是一列專案,而是專案及其注釋的組合。自定義列表以 標籤開始。每個自定義列表項以 開始。每個自定義列表項的定義...

《CSS權威指南》學習記錄 文字屬性

使用文字屬性,可以控制文字的顏色 字元間距,對齊文字,裝飾文字,對文字進行縮排等。p 通過使用text indent,可以將元素的第一行縮排乙個指定長度,甚至是負值。一般的,可以將其應用到所有塊級元素上,但不能應用到行內 inline 元素上,影象之類的替換元素也不行。不過,如果乙個塊級元素的首行中...