普通流定位
浮動定位
相對定位
絕對定位
固定定位
每個元素在頁面上都有自己的空間
每個元素都是從父元素的左上角開始繪製
塊級元素按照從上往下的順序，逐行排列，每個元素獨佔一行
行內/行內塊，多個元素在一行中，從左往右顯示
讓塊級元素橫向顯示
float: none/ left/ right
元素浮動：
脫離文件流(頁面不佔空間，後續元素上前補位)
2. 在當前行，向左/右對齊，如果之前有其他浮動元素，停靠其他浮動元素的後面
浮動元素的特點
元素一旦浮動，不佔頁面空間，後續元素上前補位
浮動元素停靠在父元素的左/右邊緣,或者其他已浮動元素的後面
父元素橫向顯示不下所有浮動元素，會把顯示不下的部分擠下去
塊級元素橫向顯示，靠浮動解決
浮動元素佔位問題
當父元素橫向顯示不下所有元素時，顯示不下的元素會換行。
但是,已浮動會根據自己的浮動方向佔據位置。導致被擠下去的元素會繞開被佔據的位置顯示。
.浮動元素，如果沒有定義寬度，最後的寬度是靠內容撐開
元素一旦浮動之後，都會變成塊級(設定寬高，垂直外邊距有效)
文字，行內元素，行內塊，不會被浮動元素壓在下面，而是巧妙的繞開，環繞著浮動元素顯示
清除之前浮動元素帶來的影響
就是本元素不上前補位
clear
:left
right
both
父元素不設定高度，高度靠內容撐起
所有子元素都浮動，父元素認為頁面上沒內容
高度就為0；
解決高度坍塌
給父元素設定高度，很多時候，事先不知道明確的高度
父元素也浮動，不過會給父元素的兄弟元素帶來影響
overflow:hidden;
父元素內，追加乙個空的div，只設定clear:both
塊級，行內，行內塊，table
絕對元素在網頁中的表現形式
display
: inline; 行內
block 塊級
inline-block 行內塊
table 讓元素的顯示方式變為table方式
none 脫離文件流的隱藏
visibility
:visible 顯示，預設值
hidden 不脫離文件流隱藏
opacity: 0~1;
rgba只會改變當前顏色的透明度
opacity,元素內部所有與元素相關的，透明度都會跟著改變
使用場景
tr/td/th vertical-align
:top/middle/bottom
img vertical-align
:top/middle/bottom/baseline（預設）
一般，我們會把img的vertical-align，設定成非baseline
這個游標特效有很多，以下展示的用的最多
cursor：default 預設箭頭
pointer 小手
text 文字
wait 等待
crosshair 十字
help 幫助
list-style-type
:none;
disc
circle
square
list-style-image
:url(true.png)
;
list-style-position：inside/outside（預設）list-style:type img position;
專案中最常出現的方式list-style:none;取點
position：
取值 static 預設預設值，靜態(預設文件流)
relative 相對定位
absolute 絕對定位
fixed 固定定位
1.當乙個元素被position修飾，並且取值為relative/absolute/fixed其中一種時，這個元素被稱為已定位元素
2.已定位元素，解鎖4個偏移屬性
top 距離上方有多遠 + ↓，- ↑
left 距離左邊有多遠 + →，- ←
right
bottom
附加屬性發生衝突，應用top和left
position：relative； 4個偏移屬性
元素只新增position:relative，不寫偏移量，對周圍其他元素沒有任何影響。(跟沒寫relative一樣)
相對定位，沒有脫離文件流
相對自己原來位置做偏移
使用場合：
做元素的微調(類似於margin的效果)
通常作為絕對定位元素的已定位祖先元素使用
position:absolute；配合偏移量使用
絕對定位的元素，脫離文件流
當祖先級元素，沒有已定位元素，相對於body左上角偏移
絕對定位的元素會相對，離自己「最近的」「已定位的」「祖先」元素的左上角偏移
注意：relative通常作為絕對定位元素的已定位祖先元素使用
如果不設定堆疊順序，最後乙個元素堆疊順序最高(html的最後)
z-index
: 無單位的整數
預設的堆疊順序，不大於1
定位的脫離文件流，和浮動的脫離文件流不是乙個體系
只有對已定位的元素，才能使用z-index
堆疊順序對於父子無效，兒子永遠站在爹肩膀上
position：fixed;配合偏移量使用
永遠相對body定位
"d3">
"d33">
"" id="a1">變成塊級
"" id="a2">變成行內塊
"" id="a3">變成table
"" id="a4">none
"d1">dddddd111
"d2">dddddd222
"d2">
相對定位 絕對定位 固定定位
設定position屬性值為static的元素是乙個靜態定位元素，此值為預設值，即此元素在正常文件流中。設定position屬性為relative的元素是乙個相對定位元素，其定位的參照物為元素本身 即元素原本的位置進行定位 例項 parent child style class parent cla...
css 相對定位，絕對定位，固定定位
定位有三種，分別是相對定位 絕對定位 固定定位。相對定位 position relative 絕對定位 position absolute 固定定位 position fixed 相對定位 相對定位，就是微調元素位置的。讓元素相對自己原來的位置，進行位置調整。head meta charset ut...
絕對定位，相對定位，固定定位
通過position屬性來設定元素的定位 static 預設值，元素沒有開啟定位 relative 開啟元素的相對定位 absolute 開啟元素的絕對定位 fixed 開啟元素的固定定位 也是絕對定位的一種 說明 當開啟了元素的相對定位以後，而不設定偏移量時，元素不會發生任何變化 相對定位是相對於...