WEB前端 定位

2022-08-23 09:03:15 字數 757 閱讀 7191

可以使元素定位到相對于父元素或另乙個元素甚至瀏覽器視窗本身的位置。

div、h1 或 p 元素常常被稱為塊級元素。這意味著這些元素會單獨占用一行。而span 和 strong 等元素稱為「行內元素」,這是因為它們的內容顯示在行中,即「行內框」。

文字

p元素

html預設的文件流,從上到下排列,乙個塊級元素占用一行,框之間的垂直距離是由框的垂直外邊距計算出來,以此類推

相對定位類似與android中的relative布局方式,相對於元素在文件中的初始位置。

例如:原本是橫向擺放3個元素,由於2元素使用了,相對定位後,脫離了文件流控制

#box_relative
執行後效果:

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

設定為絕對定位的元素框從文件流完全刪除,就好像該元素原來不存在一樣。元素定位後生成乙個塊級框,而不論原來它在正常流中生成何種型別的框,絕對定位是「相對於」父元素來定位的。

例如:

#box_relative
執行後的效果:

WEB前端學習 Day4(定位)

乙個元素,如何讓它擺在自己想要的位置。就需要弄透css的定位相關的屬性。首先,乙個元素預設是按照文件流進行布局的,比如說三個div,它缺省會占用三行,三個span,它預設占用一行,當這一行不夠時,也會換行。這就是預設的文件流,每個元素根據自己的特性進行布局。有時候需要擺脫文件流,就需要特殊處理。現在...

WEB前端學習 CSS定位浮動,列表

1 概念 頁面上的元素,應該出現的位置。2 分類 普通定位 浮動定位 float,相對定位 relative,在原地上下浮動 絕對定位 absoluate,固定定位 fixed3 定位詳解 1 普通劉定位 又稱文件流定位,就是頁面中元素預設的顯示方式。2 浮動定位 解決問題 能夠讓多個塊級元素在一行...

DAY2補充3 定位 WEB前端

1 概述 day2補充3,介紹html中定位的所有型別和相關用法。博主在浮動篇簡單提到過定位,這裡更加詳細的介紹。2 定位 2.1 什麼是定位?定位元素框相對於其正常位置應該出現的位置 定位分類 1 普通流定位 文件流 預設 2 浮動定位 3 相對定位 4 絕對定位 5 固定定位 2.2 定位的屬性...