1. 網(wǎng)頁元素的三種布局模型
-
流動(dòng)模型（Flow）
- 是默認(rèn)的網(wǎng)頁布局模型
- 塊狀元素會(huì)自上而下按順序，垂直延伸分布村刨，因?yàn)閴K元素都獨(dú)占一行
- 內(nèi)聯(lián)元素會(huì)從左到右水平分布
-
浮動(dòng)模型 (Float)
- 浮動(dòng)布局的核心卸奉，是讓元素脫離普通流，然后使用
width/height,margin/padding將元素定位
- 浮動(dòng)布局的核心卸奉，是讓元素脫離普通流，然后使用
- 可以設(shè)置浮動(dòng)讓塊狀元素并排顯示
- 層模型（Layer）
2. 層模型詳解
- 默認(rèn)：
position: static - 繼承：
position:inherit - 絕對(duì)定位：
position: absolute - 相對(duì)定位：
position: relative - 固定定位：
position: fixed
說明：
- 占位空間：元素在文檔流中所占據(jù)的空間
- 物理空間：元素本身所占據(jù)的空間
１.position:absolute
- 元素會(huì)脫離文檔流，周圍元素會(huì)忽略它的存在谨胞，
left; right; top;bottom屬性值有效 - 以最近的
position不為static的祖先元素為參照物，如果不存在則相對(duì)于body元素蒜鸡，即瀏覽器窗口
<div style="position: absolute">Im an absolute element</div>
<div>Im a default element</div> //結(jié)果會(huì)重疊
２. `position:relative`
+ 元素不會(huì)脫離文檔流胯努，周圍元素不會(huì)忽略它的存在，`left; right; top;bottom`屬性值有效
+ 相對(duì)定位完成的過程
+ 首先按`static(float)`方式生成一個(gè)元素(并且元素像層一樣浮動(dòng)了起來)
+ 然后相對(duì)于以前的位置移動(dòng)逢防，移動(dòng)的方向和幅度由`left叶沛、right、top忘朝、bottom`屬性確定灰署，偏移前的位置保留不動(dòng)
+ ```
<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定位類似，但它是相對(duì)視圖（網(wǎng)頁窗口）移動(dòng)的局嘁，當(dāng)頁面寬高超過窗口的時(shí)候溉箕，fixed的元素會(huì)懸浮在那里，我們?cè)陧撁嫔峡吹降母鴿L動(dòng)條走得懸浮塊都是這么做的
４. position: static
-
left; right; top;bottom屬性值無效
５. position:inherit
- 繼承父元素的
position值
相關(guān)文章推薦:
深入學(xué)習(xí)CSS布局系列（一）布局常用屬性
學(xué)習(xí)CSS布局
CSS常見布局
CSS Grid布局：什么是網(wǎng)格布局
