1. 網頁元素的三種布局模型
-
流動模型（Flow）
- 是默認的網頁布局模型
- 塊狀元素會自上而下按順序，垂直延伸分布，因為塊元素都獨占一行
- 內聯元素會從左到右水平分布
-
浮動模型 (Float)
- 浮動布局的核心，是讓元素脫離普通流，然后使用
width/height,margin/padding將元素定位
- 浮動布局的核心，是讓元素脫離普通流，然后使用
- 可以設置浮動讓塊狀元素并排顯示
- 層模型（Layer）
2. 層模型詳解
- 默認：
position: static - 繼承：
position:inherit - 絕對定位：
position: absolute - 相對定位：
position: relative - 固定定位：
position: fixed
說明：
- 占位空間：元素在文檔流中所占據的空間
- 物理空間：元素本身所占據的空間
１.position:absolute
- 元素會脫離文檔流，周圍元素會忽略它的存在，
left; right; top;bottom屬性值有效 - 以最近的
position不為static的祖先元素為參照物，如果不存在則相對于body元素，即瀏覽器窗口
<div style="position: absolute">Im an absolute element</div>
<div>Im a default element</div> //結果會重疊
２. `position:relative`
+ 元素不會脫離文檔流，周圍元素不會忽略它的存在，`left; right; top;bottom`屬性值有效
+ 相對定位完成的過程
+ 首先按`static(float)`方式生成一個元素(并且元素像層一樣浮動了起來)
+ 然后相對于以前的位置移動，移動的方向和幅度由`left、right、top、bottom`屬性確定，偏移前的位置保留不動
+ ```
<div style="position: relative;top:100px;left:100px">Im a relative element</div>
<div>Im a default element</div>
３. position: fixed
-
left; right; top;bottom屬性值有效 - 與
absolute定位類似，但它是相對視圖（網頁窗口）移動的，當頁面寬高超過窗口的時候，fixed的元素會懸浮在那里，我們在頁面上看到的跟著滾動條走得懸浮塊都是這么做的
４. position: static
-
left; right; top;bottom屬性值無效
５. position:inherit
- 繼承父元素的
position值
相關文章推薦:
深入學習CSS布局系列（一）布局常用屬性
學習CSS布局
CSS常見布局
CSS Grid布局：什么是網格布局
