絕對定位與浮動定位(隨筆)

2021-07-31 12:37:22 字數 280 閱讀 1030

使用絕對定位將某一元素移動到指定位置,那麼該元素原來佔據的空間將消失。絕對定位的元素不會對旁邊的元素帶來影響,就像這個元素不存在一樣(雖然我們還能看到)。

使用絕對定位的優勢在於:我們可以絲毫不差的精確控制元素的位置--這裡面沒有運氣可言的。由於使用絕對定位,將元素從常規文件流中移出,所以不會對旁邊的元素造成影響。

浮動定位更有機巧性,給插入頁面中的設定浮動屬性後,下方的文字會環繞在周圍。

浮動定位的優勢在於:浮動元素仍然在文件流中,其周圍環繞的元素也知道它的位置。

css 相對定位 絕對定位 浮動 分析

點評 w3school 站點上的所有頁面都採用了這種技術,如果您開啟我們使用 css 檔案,您會看到我們對頁尾的 div 進行了清理,而頁尾上面的三個 div 都向左浮動。相對定位是乙個非常容易掌握的概念。如果對乙個元素進行相對定位,它將出現在它所在的位置上。然後,可以通過設定垂直或水平位置,讓這個...

css 浮動 相對定位 絕對定位區別

html是按照檔案流 普通流 的方式載入的,但是全部是普通流的話,很多好看的樣式是實現不了的,所以出現了浮動,相對定位,絕對定位的概念。一 首先,按照普通流和非普通流來分類 普通流 就是按照上下左右的順序一行一行排列的,長度不夠就會自動擠到下一行。非普通流 顧名思義就是脫離普通流的,在普通流上面是不...

css 浮動 相對定位 絕對定位區別

html是按照檔案流 普通流 的方式載入的,但是全部是普通流的話,很多好看的樣式是實現不了的,所以出現了浮動,相對定位,絕對定位的概念。一 首先,按照普通流和非普通流來分類 普通流 就是按照上下左右的順序一行一行排列的,長度不夠就會自動擠到下一行。非普通流 顧名思義就是脫離普通流的,在普通流上面是不...