1.浮動可以讓多個盒子一行沒有縫隙排列顯示,經常用於橫向排列盒子。
2.定位則是可以讓盒子自由的在某個盒子內移動位置或固定螢幕中的某個位置,並且可以壓住其他盒子。
定位組成：
定位：將盒子定在某乙個位置,所以定位也是在擺盒子,按照定位的方式移動盒子。
定位 = 定位模式 + 變偏移
定位模式用於指定乙個元素在文件中的定位方式。邊偏移則決定了該元素的最終位置。
定位模式決定元素的定位方式,它通過css的position屬性來設定,其值可以分為四個:值語義
static
靜態定位
relative
相對定位
absolute
絕對定位
fixed
固定定位
邊偏移就是定位的盒子移動最終位置。有top、bottom、left和right4個屬性
邊偏移屬性
示例描述
toptop:80px
頂端偏移量,定義元素相對於其父元素上邊線的距離
bottom
bottom:80px
底部偏移量,定義元素相對於其父元素下邊線的距離
left
left:80px
左側偏移量,定義元素相對於其父元素左邊線的距離
right
right:80px
右側偏移量,定義元素相對於其父元素右邊線的距離
靜態定位是元素的預設定位方式,無定位的意思。
語法：
選擇器靜態定位在布局時很少用到
相對定位是元素在移動位置的時候,相對於它原來位置來說的(自戀型)
語法：
選擇器1.它是相對於自己原來的位置來移動的(移動位置的時候參照自己原來的位置)
2.原來在標準流的位置繼續占有,後面的盒子仍然以標準流的方式對待它(不脫標,繼續保留原來位置)
因此,相對定位並沒有脫標,它是典型的應用是給絕對定位當爹的。。。
絕對定位是元素在移動位置的時候,是相對於它祖先元素來說的(拼爹型)
語法:
選擇器1.如果沒有祖先元素或者祖先元素沒有定位,則以瀏覽器為準定位(document文件)
2.如果祖先元素有定位(相對、絕對、固定定位)則以最近一級的有定位祖先元素為參考點移動位置的。
3.絕對定位不占用原來的位置(脫標)
1.絕對定位和相對定位到底有什麼使用場景呢？
子絕父相：子級使用絕對定位,父級則需要使用相對定位
2.為什麼說相對定位給絕對定位當爹呢？
①子級絕對定位,不會占有位置,可以放到父盒子裡面的任何乙個地方,不會影響到其他兄弟盒子。
②父盒子需要加定位限制子盒子在父盒子內顯示
③父盒子布局時,需要占有位置,因此父親只能是相對定位。
這就是子絕父相的由來,所以相對定位經常用來作為絕對定位的父級
總結：因為父級需要占有位置,因此是相對定位,子盒子不需要占有位置,則是絕對定位
當然,自絕父相不是永遠不變的,如果父元素不需要占有位置,子絕父絕也會遇到
固定定位是元素固定於瀏覽器可視區的位置。主要使用場景：可以在瀏覽器頁面滾動時元素的位置不會改變。
語法：
選擇器1.以瀏覽器的可視視窗為參照點移動元素
跟父元素沒有任何關係
2.不隨著滾動條滾動
3.固定定位不保留原來的位置
CSS定位 浮動定位
css定位機制 浮動定位 float屬性 進行浮動定位 left，right clear屬性 清除浮動 left，right，both float屬性 1.概述 div實現橫向多列布局 float屬性 left 左浮動 right 右浮動 none 不浮動 下圖為 的實現 float屬性用途 在 混...
css 定位連線 css絕對定位
定位的四種模式 static,relative,absolute,fixed 定位的四個位置 left,right,top,bottom 定位屬性 position,有四種狀態值 1.static 靜態定位,按元素在文件流中的順序排列,這是預設值,四個位置無效 2.relative 相對定位,元素相...
CSS定位，相對定位，絕對定位
position relative 表示相對定位。對乙個元素進行相對定位，即指通過設定垂直或水平位置，讓這個元素 相對於 它的原點起點進行移動。如果將top設定20px，那麼框將在原位置頂部下面20畫素的地方 如果將left設定為30畫素，那麼會在元素左邊建立30畫素的空間，也就是將元素向右移動，如...