CSS 定位與浮動

2022-07-26 17:06:13 字數 1681 閱讀 6143

css 定位 

static:元素框正常生成。塊級元素生成乙個矩形框,作為文件流的一部分,行內元素則會建立乙個或多個行框,置於其父元素中。

相對定位(relative):與最近的乙個元素進行定位。相對於原始的位置進行移動

注意,在使用相對定位時,無論是否進行移動,元素仍然佔據原來的空間。因此,移動元素會導致它覆蓋其它框。

絕對定位(absolute):設定為絕對定位的元素框從文件流完全刪除,並相對於其包含塊定位,包含塊可能是文件中的另乙個元素或者是初始包含塊。元素原先在正常文件流中所佔的空間會關閉,就好像該元素原來不存在一樣。元素定位後生成乙個塊級框,而不論原來它在正常流中生成何種型別的框。(是以html的邊框為參照的)

注意:因為絕對定位的框與文件流無關,所以它們可以覆蓋頁面上的其它元素。可以通過設定 z-index 屬性來控制這些框的堆放次序。

在下面這個例子中,與上面乙個元素出現了層疊:

設定top:20px;導致了間距不夠,就進行覆蓋。

通過絕對定位,元素可以放置到頁面上的任何位置。下面的標題距離頁面左側 100px,距離頁面頂部 150px。

1617

18固定定位(fixed):在頁面滾動時,具有固定定位的位置不會改變。固定定位只在特定的情況下才會使用,一般不會使用。

浮動

浮動(float):浮動的框可以向左或向右移動,直到它的外邊緣碰到包含框或另乙個浮動框的邊框為止。有(left,right,none,inherit)四個屬性。

浮動是自動脫離了文件流

清除浮動:

在使用浮動之後,會導致一些問題,浮動的內容不能很好的進行定位,在定位時由於脫離了文件流,寬度和高度會受到影響,不能設定成理想的效果,所以有時可以通過清除浮動解決。

清除浮動可以使用:

乙個物件裡面有兩個子物件都設定為了浮動,前面的浮動就要清除

overflow:hidden;可以清除浮動,同時也可以,將元素溢位的部分隱藏起來,在寫輪播時也會使用到。

overflow:auto;

clear:both(left,right,none,inherit)

同時也帶來了一些多餘的元素。

使用偽after元素:

一、該方法中必須為需要清除浮動元素的偽物件中設定height:0,否則該元素會比實際高出若干畫素;

二、content屬性是必須的,但其值可以為空,藍色理想討論該方法的時候content屬性的值設為」.」,

在寫html+css時,我習慣使用無序列表,然後使用float來將li進行排列,也出現了很多的問題,使用浮動導致不能達到想要的定位效果,同時在將螢幕大小進行調整時,定位也會受到影響,導致結構被破壞。(所以要清除浮動,或者避免使用浮動的方法),盡可能的少使用float屬性。

display:inline-block;將物件呈遞為內聯物件,但是物件的內容作為塊物件呈遞。旁邊的內聯物件會被呈遞在同一行內.可以解決浮動的脫離文件流,對高度和寬度都可以進行定義.

可以解決浮動在進行定位時的問題。

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...