第十章 浮動和定位

2021-07-10 01:12:10 字數 4170 閱讀 7652

第十章 浮動和定位

1.浮動 float

值:left right none inherit

初始值:none

繼承性:無

應用於:所有元素

說明:1.浮動元素會從文件流中刪除,但依然影響頁面布局。

2.乙個元素浮動後,周圍元素會「環繞」該元素,如img。

3.浮動元素的外邊距不會與周圍元素的外邊距發生合併。

4.浮動元素內幕:(以下所稱邊界為內容邊界,不含padding)

a.浮動元素會自動生成乙個塊級框。

即使行內非替換元素也是如此,只要它浮動,就會生成乙個塊級框。

就會像像塊級元素那樣表現和擺放(如div一樣),不過不同的是周圍元素

會圍繞該元素。所以對浮動元素設定display:block沒有必要。

b.規則

水平方向:

如果左浮動,不能超過包含塊的左邊界;如果右浮動,不能超過包含塊的右邊界。

左浮動時,如果左邊有乙個左浮動元素,則其左邊界緊挨前乙個元素的右邊界,或者如果超出包含塊,則其上邊界緊挨前乙個浮動元素的下邊界;向右浮動同理。

左浮動元素的右邊界,不會在其右邊右浮動元素的的右邊;右浮動同理。

垂直方向:

不同於氣球,浮動元素不能向上一直浮動,最多到包含塊內部頂端。

浮動元素不能比原始文件流中之前的浮動元素或塊級元素更高。

如果原文件流中乙個浮動元素出現了另乙個元素,則浮動元素的頂端不能比包含該元素生成的任何行框更高。

如果相鄰元素同時浮動,且它們寬度之和大於包含塊寬度,則位於後面的元素會自動下移,以免超出包含塊。

極端:浮動元素會置於盡可能高的位置。

左浮動元素盡量向左浮動;右浮動元素盡量向右浮動。

c.如果浮動元素在溢位包含塊,這時可以將包含塊設定為浮動,就可使包含塊自動完全包裹浮動元素。

d.浮動元素超出包含塊外邊界的情況:1.浮動元素設定了負外邊距 2.浮動元素更寬或更高

e.當浮動元素與其他元素重疊時,行內元素:其邊框,背景和內容都會在浮動元素之上。

塊級元素:邊框和背景都位於浮動元素之下,只有內容位於浮動元素之上。

f.清除 clear

值:left right both none inherit

初始值:none

應用於:塊級元素(被浮動元素影響的塊級元素)

繼承性:無

說明:1.實質是在元素上下外邊界增加「清楚區域」(值不確定),並不影響元素真實外邊距。

2.大多數情況下,要確保清除元素(設定clear屬性的元素)的頂端與浮動元素間有一定空間,可為浮動元素設定乙個下外邊距。

原理:下外邊界會增加浮動元素框的大小,設定clear屬性的清除元素必須推到浮動框下面你的某個點。

浮動框大小的增加會使這個點下移。

2.定位 position

值:static relative absolute fixed inherit

初始值:static

應用於:所有元素

繼承性:無

說明:static:正常流中預設的定位方式,行內元素生成乙個或多個行框,置於父元素中。

relative:元素仍處於文件流中,保持未定位前的形狀,原本佔據的文件空間仍被佔據,如果指定偏移量,只是相對於自身偏移。

absolute:從文件流中刪除,就像此元素不存在一樣。即使是行內元素也會生成塊級框,這點和float相同。

相對於前代第乙個定位非static的元素發生偏移,如果沒有這樣的元素,則相對於整個頁面偏移。

fixed:從文件流中刪除,相對於整個頁面可視窗偏移,頁面滾動時相不影響可視位置。

1.包含塊

對於浮動float,包含塊是最近的塊級祖先元素,而對於定位略複雜:

a.在html中,一般將作為根元素,不過有些瀏覽器也將作為根元素。在大多數瀏覽器中,初始包含塊是乙個視窗的矩形。

b.對於非根元素,如果position為static或relative,包含塊則是最近的塊級框,**單元,或行內塊祖先框。

c.對於非根元素,如果position為absolute,包含塊則是最近的,position不為static的祖先元素(塊級和行內元素都可)

如果這個祖先元素是塊級元素,則相對於此塊級元素的邊框界定

如果是行內元素,向上相對於此行內元素第乙個行框的上邊界和左邊界;向下則相對於最後乙個行框的下邊界和右邊界界定。

2.偏移 top right bottom left

值:auto inherit

初始值:auto

應用於:定位元素(即position不為static的元素)

繼承性:無

百分數:top和bottom相對於包含塊的height;left和right相對於包含塊的width。

說明:a.這些值都是元素的外邊距相對於包含塊的偏移,如果為正,向外偏移,如果為負,向內偏移。

b.儘管設定乙個元素的高度和寬度有時很重要,但對於定位元素來講,可以通過同時設定top right bottom left

實現隱式設定高度和寬度。如果定位元素包含padding或margin可以將width和height設定為auto實現。

比如:要使定位元素佔據包含塊的左半部分,可以這樣設定

top:0;bottom:0;left:0;right:50%

3.限制高度和寬度 min-width min-height max-width max-height

值:inherit

初始值:?

應用於:除非替換行內元素和表元素以外的所有元素

百分數:相對於包含塊的width和height

說明:1.都不能為負值

2.ie/win7之前不支援這些屬性

3.這些屬性同樣對float適用,比如可以設定浮動元素寬度相對于父元素為多少,但不小於某值。

4.溢位 overflow

如果乙個元素設定為特定大小,但內容不能被包含塊完全包裹,就會出現溢位現象。

值:visible hidden scroll auto inherit

初始值:visible

應用於:塊級元素和替換元素

繼承性:無

說明visible:即使元素溢位,元素內容依然可見,但不改變元素框的形狀。

scroll:在元素邊界裁剪,並生成滾動條,但在列印時,效果依然同visible。

hidden:裁剪內容,但不生成滾動條。

auto:有必要時生成滾動條,但不同瀏覽器實現不同

滾動條:不同瀏覽器中,樣式和尺寸實現不同。

5.裁剪 clip

值:rect(top, right, bottom, left)

初始值:auto

應用範圍:絕對定位元素

說明:1.每個值之間的逗號後面最好使用空格。

2.各個值不是偏移量,而是距元素左上角的距離。比如,如果要裁剪元素左上角20 x 20px的正方形,則為:

rect(0, 20px, 20px, 0)

3.可為負值,使裁剪區域延伸到元素外,但不能超出上邊界和左邊界。

4.相容性不強,建議不使用。

6.元素可見性 visibility

值:visible hidden collapse inherit

初始值:visible

應用於:所有元素

說明:1.hidden:元素只是「透明」,不會從文件流中刪除,而使用display:none時,則同時從文件流中刪除。

2.如果visible設定為hidden的子元素設定為visible,儘管父元素和兄弟元素不可見,它也可見。

7.絕對定位 absolute

a.絕對定位元素會從文件流中刪除,也不會流入其他元素。即絕對定位元素可能覆蓋其他元素,也可能被其他元素覆蓋。

b.自動偏移:如果top設定為auto,那麼top最終的呈現形式為元素沒有設定為absolute時的效果。

left和right同樣適用這一規則,不過絕對定位後元素從文件流中刪除,所以會在此位置上與其他元素內容重疊。

8.z軸上的放置 z-index

值:auto inherit

初始值:auto

應用於:定位元素

繼承性:無

說明:1.值越大,越靠近讀者

2.如果希望某個元素在所有元素前面,可以設定乙個超大值,如10000

9.相對定位 relative

不會從文件流中刪除該元素,如果發生偏移,原位置保持空白。

重置:如果top為10px,bottom為20px時發生衝突,css2.1會將bottom重置為-10px;left和right也是如此。

第十章 函式

使用def關鍵字 定義個數可變的位置形參 定義個數可變的關鍵字形參 定義預設值引數 定義個數可變的位置形參 deffun1 args 結果為乙個元組 print args fun1 10,20,30 10,20,30 定義個數可變的關鍵字形參 deffun2 args 結果為乙個字典 print a...

第十章 屬性

z屬性 本章也比較簡單稍作介紹 無參屬性就是我們常見的屬性 可以封裝屬性 以執行緒安全方式訪問 有參屬性就是c 中的所引器 匿名型別 如圖遇到如下 具體點就是 上面的注釋也已經講清楚了,定義的型別之後,構造例項,然後初始化屬性。現在詳細說下 編譯器接收到 上圖 先用var 定義乙個型別,但是不具體指...

第十章 屬性

目錄 10.1 無參屬性 10.2 有參屬性 10.3 呼叫屬性訪問器方法時的效能 10.4 屬性訪問器的可訪問性 10.5 泛型屬性訪問器方法 物件導向設計和程式設計的重要原則之一就是資料封裝,意味著型別的字段不應該公開,否則很容易因為不恰單使用欄位而破壞物件的狀態。可將屬性想象成智慧型字段,即背...