定位方式4+1

position定位

靜態定位(文檔流定位):是元素的默認定位方式

格式:position:static

元素顯示特點: 塊級元素從上到下排列,行內或行內塊元素從左向右排列,元素不易實現層疊效果

如何控制元素的位置: 通過外邊距.

相對定位

格式:position:relative

元素顯示特點: 元素不脫離文檔流(元素不管顯示到什么位置 仍然占著原來的位置)

如何控制元素的位置: 通過top/left/right/bottom控制元素的顯示位置,坐標相對于初始位置

應用場景: 當需要移動某個元素,但移動該元素時不影響其它元素的顯示效果,這時使用相對定位,如果做位置微調使用相對定位

絕對定位

格式: position:absolute

元素顯示特點: 元素脫離文檔流(當元素設置為絕對定位時會讓出自己所占的位置)

如何控制元素的位置: 通過top/left/right/bottom控制元素位置,坐標相對于窗口(默認)或某一個上級元素(添加相對定位)

應用場景:如果移動到的位置是某個上級元素的角落使用絕對定位,如果需要往頁面中添加一個元素而且不希望影響現有的顯示效果(也就是不在文檔流里面)使用絕對定位

固定定位

格式: position:fixed;

元素顯示特點: 元素脫離文檔流

如何控制位置: 通過top/left/rigth/bottom控制元素位置,坐標相對于窗口.

應用場景: 需要將元素固定在窗口的某個位置,并且不隨著內容位置改變而改變

####浮動定位

格式: float:left/right;

顯示特點: 元素脫離文檔流,元素從當前行向左或向右浮動,當撞到上級元素邊緣或其它浮動元素時停止

如何控制元素位置: 通過外邊距

如果元素的所有子元素全部浮動,則元素自動識別的高度為0,通過給元素添加overflow:hidden解決.

應用場景: 當需要將縱向排列的元素改成橫向排列時使用浮動定位

###行內元素的對齊方式vertical-align

top 頂部對齊

bottom 底部對齊

middle 中間對齊

baseline 基線對齊(默認)

####布局練習步驟:

給big設置寬度1000 并通過外邊距0 auto居中

第一行里的div設置寬高一個左邊浮動 一個右邊浮動

第一行和第二行div都設置overflow:hidde

第二行里面的div設置寬高,一個左邊浮動,剩下3個

右邊浮動

練習

1.相對定位

顯示效果:

2.絕對路徑

顯示效果:

3.絕對定位練習

測試絕對定位

測試結果:

4.定位練習

用戶名不能為空!

測試效果:

5.固定定位

顯示效果:

滾動頁面時紅色框中內容不動

6.浮動定位

顯示效果:

7.學子商城練習

電腦,辦公/1F

電腦整機

• 筆記本
• 游戲機
• 臺式機
• 一體機
• 服務器
• 聯想

電腦配件

• CPU
• SSD硬盤
• 顯示器
• 顯卡
• 組裝電腦
• 機箱

外設/游戲

• 鍵盤
• 鼠標
• U盤
• 移動硬盤
• 游戲設備
• 智能單車

顯示效果:

8.行內對齊方式

顯示效果:

9.布局練習

顯示效果:

5G游戲 web前端

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。