CSS學習筆記——傳統定位篇

全棧猿人發表於2020-11-28

1. 標準流(文件流)

在沒有使用任何定位和浮動情況下,Html中塊元素從上到下排布(每個塊獨佔一行,自帶換行),內聯元素從左到右排布。

2.幾種常見定位

1、靜態定位(static)
一般的標籤元素不加任何定位屬性都屬於靜態定位,在頁面的最底層屬於標準流。

 靜態定位的元素不會受到 top, bottom, left, right影響。

2、絕對定位(absolute)
absolute表示,相對於上級元素(一般是父元素)進行偏移,即定位基點是父元素。

它有一個重要的限制條件:定位基點(一般是父元素)不能是static定位,否則定位基點就會變成整個網頁的根元素html。

另外,absolute定位也必須搭配top、bottom、left、right這四個屬性來定位。


3、相對定位(relative) 
relative表示,相對於預設位置(即static時的位置)進行偏移,即定位基點是元素的預設位置。

它必須搭配top、bottom、left、right這四個屬性一起使用,用來指定偏移的方向和距離。

4、固定定位(fixed)
fixed表示,相對於視口(viewport,瀏覽器視窗)進行偏移,即定位基點是瀏覽器視窗。這會導致元素的位置不隨頁面滾動而變化,好像固定在網頁上一樣。

5、粘性定位(sticky)
sticky跟前面四個屬性值都不一樣,它會產生動態效果,很像relative和fixed的結合:一些時候是relative定位(定位基點是自身預設位置),另一些時候自動變成fixed定位(定位基點是視口)。

sticky生效的前提是,必須搭配top、bottom、left、right這四個屬性一起使用,不能省略,否則等同於relative定位,不產生"動態固定"的效果。

6、浮動定位(float)

float 屬性定義元素在哪個方向浮動,在 CSS 中,任何元素都可以浮動。浮動元素會生成一個塊級框,而不論它本身是何種元素。
如果浮動非替換元素(html大部分元素都是不可替換元素),則要指定一個明確的寬度;否則,它們會盡可能地窄。

註釋:假如在一行之上只有極少的空間可供浮動元素,那麼這個元素會跳至下一行,這個過程會持續到某一行擁有足夠的空間為止。

3、對比:(精華!!!!要理解透!!)

不脫標元素:靜態定位的元素和相對定位元素佔在標準流中的空間(相對定位元素在)。

 是否在標準流中能否使用top、bottom、left、right是否還佔標準流的空間在未使用top等定位下元素的位置變化top、bottom、left、right定位的基點(參照點)
靜態定位(static)在標準流中不能使用top、bottom、left、right佔空間預設標準流位置/
絕對定位(absolute)脫離標準流必須使用top、bottom、left、right不佔空間緊鄰最近不脫標的元素父元素不是stastic就為父元素否則就是html根元素
 相對定位(relative)在標準流中必須使用top、bottom、left、right佔空間緊鄰最近不脫標的元素基點為最近不脫標的元素位置
固定定位(fixed)脫離標準流可以使用top、bottom、left、right不佔空間緊鄰最近不脫標的元素基點是瀏覽器視窗
浮動定位(float)脫離標準流不能使用top、bottom、left、right不佔空間緊鄰最近不脫標的元素/

 

 


 

 

 

 

 

相關文章