國慶福利“CSS定比特大禮包”

chnnds 2022-01-07 09:24:26 阅读数:640

福利 css 比特 特大


喜提大禮包

小編我恭喜你抽中了我為你們准備的國慶前夕大禮包,這個大禮包就是CSS定比特知識點大禮包,你開不開心,意不意外,驚不驚喜?接下來請欣賞為你們准備的大禮包吧!
請添加圖片描述


一、定比特和浮動有什麼區別?

之前我們說過浮動,浮動和定比特有些效果看著或許是一樣的,但是他們還是有本質的區別的。今天就由我來告訴你他們之間的不同之處。
首先浮動的效果大家都知道,就是浮動可以讓多個塊級盒子一行沒有縫隙排列顯示,經常用於橫向排列,這就是浮動的特點。那麼定比特和他又有什麼區別呢?其實區別就在於定比特可以讓盒子自由的在某個盒子內移動比特置或者固定在屏幕中的某個比特置,並且可以壓住其他盒子。這就是他們之間的區別了。
接下來我們就來說說定比特這個“壞東西”。

二、定比特

1.定比特的組成

定比特=定比特模式+邊偏移

2.定比特模式

定比特模式小編到現在都沒搞清楚到底是有五種還是又四種,為什麼這麼說呢?你們看了就知道了。
1.static:靜態定比特,這個呢大家可以忽略一下,因為在我的理解裏面他就是每個盒子默認的定比特模式。可以說你創建一個盒子這就是他自己自帶的屬性,你在樣式中寫不寫他都是這樣,所以小編說可以忽略。
2.relative:相對定比特
3.absolute:絕對定比特
4.fixed:固定定比特
5.sticky:粘性定比特

1.relative:相對定比特

相對定比特relative有兩個特性:
1.它是相對於自己原來的比特置進行移動,也就是說它是參照自己原來的比特置進行移動。
2.原來在標准流的比特置繼續占有,後面的盒子仍然以標准流的方式對待他。也就是說他不脫標。繼續保留原來他所占有的比特置。
語法格式:

{

position:relative;
}

這個定比特模式是這幾個定比特模式中最重要的之一,請大家牢記哦!

2.absolute:絕對定比特

絕對定比特的三個特性:
1.如果沒有祖先元素(父元素)或者祖先元素(父元素)沒有定比特,則以瀏覽器為准定比特。
2.如果祖先元素(父元素)有定比特,則以最近一級的有定比特祖先元素(父元素)為參考點移動比特置。
3.絕對定比特不占有原先的比特置。(脫標)——脫標的意思就是脫離標准流。
語法格式:

{

position:absolute;
}

重點!重點!重點!重要的事要說三遍!

3.fixed:固定定比特

固定定比特的兩個特性:
1.以瀏覽器的可視窗口為參照點移動元素。
2.固定定比特不再占有原先的比特置固定定比特也是脫標的。
語法格式:

{

position:fixed;
}

重點!重點!重點!重要的事要說三遍!

4.sticky粘性定比特

粘性定比特的是三個特性:
1.以瀏覽器的可視窗口為參照點移動元素。
2.粘性定比特是占有原先的比特置。
3.必須添加top、left、right、bottom其中一個才有效果。
語法格式:

{

position:sticky;
}

現在我就為你們解釋一下小編為為什麼說我不清楚到底定比特有幾種,就是因為這個東西sticky粘性定比特,他具有相對定比特的特性也具備絕對定比特的特性,可以說就是相對和絕對的結合體也就是他們的孩子。但是在定比特模式中又直說到了前四種,其中並不包括粘性定比特,但是他也是一種定比特模式。所以你們說他應不應該歸為定比特模式呢?

2.邊偏移

在小編我前面說的粘性定比特中有一個特性就是必須配合top,left,right,bottom一起使用。其實top、left、right、bottom這四個就是我們所說的邊偏移屬性。那什麼是邊偏移呢?其實邊偏移就是為了確定元素最終的比特置。這就是我們理解的邊偏移,聽名字我們會覺得很高大上,但實際上理解起來並不難!這四個屬性小編為你們整理了出來,一起來看看下面這個圖片吧!

在這裏插入圖片描述
語法格式:

{

top:0;
left:0;
right:0;
bottom:0;
}

當你們使用定比特的時候,需要他離盒子的上下左右邊線多少的距離,直接設置他們等於多少像素就可以了。


總結

到這裏小編今天的分享就結束了,如果有什麼地方有遺漏或者是說錯了,歡迎大家給小編留言提出。馬上到國慶節了,希望你們收到我的大禮包會十分受用!

版权声明:本文为[chnnds]所创,转载请带上原文链接,感谢。 https://gsmany.com/2022/01/202201070924256493.html