CSS 浮動與定位

2022-07-29 22:18:16 字數 2565 閱讀 5109

*浮動布局能夠實現橫向多列布局。

1.在網頁中,元素有三種布局模型:   1、流動模型(flow)   2、浮動模型 (float)   3、層模型(layer)

流動(flow)是預設的網頁布局模式。流動布局模型具有2個比較典型的特徵:

第一點,塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分布,因為在預設狀態下,塊狀元素的寬度都為100%。實際上,塊狀元素都會以行的形式佔據位置。

第二點,在流動模型下,內聯元素都會在所處的包含元素內從左到右水平分布顯示。(內聯元素可不像塊狀元素這麼霸道獨佔一行)

* 任何元素在預設情況下是不能浮動的,但可以用 css 定義為浮動,如 div、p、table、img 等元素都可以被定義為浮動。

*浮動元素周圍的外邊距不會合併。

*浮動元素包含塊是其最近的塊級祖先元素。此外,浮動元素會生成乙個塊級框,而不論這個元素本身是什麼。

*浮動元素的左或右外邊界不能超出包含塊的左右內邊界,頂端也不能超過父元素的內頂端,但是沒有規定浮動元素不能超過父元素的下邊界。浮動元素的頂端不能比之前所以浮動元素的頂端高,如果源文件中乙個浮動元素之前出現另乙個元素,浮動元素的頂端不能比包含該元素所生成框的任何行框的頂端高。

*浮動元素的內容都是可見的,不會發生重疊,這和定位時的情況完全不同,定位很容易發生重疊互相覆蓋。

*浮動元素如果都是left的話的位置一般是從左到右排放,除非包含其容器的寬度不夠的情況會向下浮動只要寬度放得下就可以放到那了。

*負外邊距可能導致浮動元素移到其父元素的外面。通過設定負外邊距,元素可能看上去比其父元素更寬,同樣道理,浮動元素也可能超過其父元素。儘管看上去會與之前的規則有點問題,但事實上並沒有違反。

*設定了浮動元素,仍舊處於標準文件流中

*當元素沒有設定寬度值,而設定了浮動屬性,元素的寬度隨內容的變化而變化

浮動清除方法:

*對於繼承來的浮動,元素可以用clear:left;或clear:right;或clear:both;來清除浮動

*同時設定width:100%(或固定寬度)+overflow:hidden;

2.層模型有三種形式:

1、絕對定位(position: absolute)

2、相對定位(position: relative)

3、固定定位(position: fixed)

*元素設定層模型中的絕對定位,需要設定position:absolute(表示絕對定位)。

這條語句的作用將元素從文件流中拖出來,即不管是它原來的位置還是移動後的位置都可以可以被其他內容填充。然後使用left、right、top、bottom屬性相對於其

最接近的乙個具有定位屬性的父包含塊進行絕對定位。如果不存在這樣的包含塊,則相對於body元素,即相對於瀏覽器視窗。

*元素設定層模型中的相對定位,需要設定position:relative(表示相對定位)。

它通過left、right、top、bottom屬性確定元素在正常文件流中的偏移位置。相對定位完成的過程是首先按static(float)方式生成乙個元素(並且元素像層一樣浮動了起來),然後相對於以前的位置移動,移動的方向和幅度由left、right、top、bottom屬性確定,偏移前的位置保留不動,不能被其他內容填充,相對移動後的位置處於浮動狀態,可以倍其他內容填充。

偏移前的位置保留不動:偏移前的位置還保留不動,覆蓋不了前面的div沒有偏移前的位置。雖然現在的div元素相對於以前的位置產生了偏移,但是div元素以前的位置還是保留著,所以div中元素是顯示在了div元素以前位置的後面。

*元素設定層模型中的固定定位,需要設定position:fixed(表示固定定位,與absolute定位型別類似,但它的相對移動的座標是檢視(螢幕內的網頁視窗)本身。

由於檢視本身是固定的,它不會隨瀏覽器視窗的滾動條滾動而變化,除非你在螢幕中移動瀏覽器視窗的螢幕位置,或改變瀏覽器視窗的顯示大小,因此固定定位的元素會始終位於瀏覽器視窗內檢視的某個位置,不會受文件流動影響,這與background-attachment:fixed;屬性功能相同。

*相對於其它元素進行定位

1、參照定位的元素必須是相對定位元素的前輩元素:

2、參照定位的元素必須加入position:relative;

3、定位元素加入position:absolute,便可以使用top、bottom、left、right來進行偏移定位了。

*position:static;與相對定位差不多。

3.對於重疊的部分可以通過z-index: 1;來規定它們出現的次序。數字越大則表示優先顯示。

4.如果讓頁面自動居中,當設定margin屬性為auto的時候,不能再設定浮動或絕對定位屬性。

5.使用absolute實現橫向兩列布局時---常用於一列固定寬度,另一列寬度自適應的情況 。主要應用技能:relative---父元素相對定位    absolute---自適應寬度絕對定位

注意:固定寬度元素的高度》自適應寬度的列

CSS浮動與定位

浮動 如果希望塊元素在頁面中水平排列,使用float浮動元素,脫離文件流 可選值 none 預設,元素在文件流中排列 left 元素脫離文件流,向頁面左側浮動 right 元素脫離文件流,向頁面右側浮動 元素浮動後,下邊的元素會立即向上移動 a浮動後,b會直接頂到上面 元素浮動後不會超出父元素邊框和...

CSS浮動與定位

css浮動 clear 向哪邊浮動,清除哪邊 clear left 在左側不允許浮動元素。clear right 在右側不允許浮動元素。clear both 在左右兩側均不允許浮動元素 clear none 預設值。允許浮動元素出現在兩側。clear inherit 規定應該從父元素繼承 clear...

CSS浮動與定位

1.1浮動 浮動 是指設定了浮動屬性的元素會脫離標準標準流的控制,移動到其父元素中指定位置的過程。它可以讓任何盒子可以在一行排列,目的用來布局。在css中,通過float屬性來定義浮動,其基本語法格式如下 float none left right選擇器 屬性值描述 left 元素向左浮動 righ...