CSS中的定位機制
阿新 • • 發佈：2018-03-10
瀏覽器 如果 出現 得到 gin 文檔流 css 過程 pan
CSS3 中有三種定位機制 : 普通文檔流 (text)| 浮動(float) | 定位(position)
普通文檔流
就是CSS中默認的文本文檔
普通流中，元素位置由文檔順序和元素性質決定，塊級元素從上到下依次排列，框之間的垂直距離由框的垂直margin值計算得到，行內元素在一行中水平布置
浮動
- 所有主流瀏覽器都支持 float 屬性，給元素設置 float 樣式 ,元素會脫離文檔流 ,浮動的元素可以左右移動，直到他的外邊框邊緣碰到包含自己的框或者另一個浮動框的邊緣。
- CSS 中，任何元素都可以浮動，浮動元素會生成一個塊級框，而不論它本身是何種元素,行內元素和行內塊元素會圍繞浮動框排列，塊元素會被覆蓋。
- 在一行之上只有極少的空間可供浮動元素，那麽這個元素會跳至下一行，這個過程會持續到某一行擁有足夠的空間為止。
- 他可取三個值:
| eft | 元素向左浮動。 |
| right | 元素向右浮動。 |
| none | 默認值。元素不浮動，並會顯示在其在文本中出現的位置。 |
案列：
div{
float: left; /* 左浮動 */
}
定位
- 所有主流瀏覽器都支持 position 屬性，給元素設置position屬性可以規定元素的定位類型。
- 任何元素都可以定位。除靜態定位以外,元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
- 他可取四個值:
| absolute |
絕對定位，相對於 static 定位以外的第一個父元素進行定位。 (子絕父相 :絕對定位相對於父元素設置了除靜態定位以外而定位,如果父級沒有設置定位他會一層層向上尋找有定位的祖級 直到body元素) |
| fixed |
絕對定位，相對於瀏覽器窗口進行定位。 |
| relative |
相對定位，相對定位看作普通流的一部分，移動後的元素仍占據原來的位置，移動元素會導致他覆蓋其他的框。 |
| static | 默認值。沒有定位。 |
子絕父相 案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.father {
position: relative;
CSS中的定位機制