文章目錄
- 喜提大禮包
- 一、定位和浮動有什么區別？
- 二、定位
- 1.定位的組成
- 2.定位模式
- 1.relative：相對定位
- 2.absolute：絕對定位
- 3.fixed:固定定位
- 4.sticky粘性定位
- 2.邊偏移
- 總結
喜提大禮包
小編我恭喜你抽中了我為你們準備的國慶前夕大禮包，這個大禮包就是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;
}
當你們使用定位的時候，需要他離盒子的上下左右邊線多少的距離，直接設定他們等于多少像素就可以了，
總結
到這里小編今天的分享就結束了，如果有什么地方有遺漏或者是說錯了，歡迎大家給小編留言提出，馬上到國慶節了，希望你們收到我的大禮包會十分受用！
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/304361.html
標籤：其他
上一篇：精靈圖和字體圖示