CSS中的四種定位區(qū)別詳解
我要評(píng)論
我們都知道，前端開發(fā)里面的CSS中常用的定位方式有
普通定位，相對(duì)定位，絕對(duì)定位、固定定位定位這四種。
但是很多零基礎(chǔ)的前端小白都不知道這4種定位方式都有什么作用和區(qū)別，在使用的時(shí)候都很不靈活，要知道，想做好網(wǎng)頁布局，這4個(gè)定位方式都是精髓呀，學(xué)好定位布局，前端開發(fā)輕輕松松！
那么今天我們就來講解一下CSS中這4種定位的作用和區(qū)別！幫助大家搞清楚這4種布局的妙用！
一、普通定位(Static)
在我們的開發(fā)過程中，除非專門指定，否則所有框都在普通流中定位。普通流中元素框的位置由元素在(X)HTML中的位置決定。塊級(jí)元素從上到下依次排列，框之間的垂直距離由框的垂直margin計(jì)算得到。行內(nèi)元素在一行中水平布置。這個(gè)就不過多描述了。
二 . 相對(duì)定位（relative）
在我們前端開發(fā)中，relative相對(duì)定位一直被看作普通文檔流定位模型的一部分，定位元素的位置相對(duì)于它在普通流中的位置進(jìn)行移動(dòng)。使用相對(duì)定位的元素不管它是否進(jìn)行移動(dòng)，元素仍要占據(jù)它原來的位置。移動(dòng)元素會(huì)導(dǎo)致它覆蓋其他的框。
結(jié)果
三 . 絕對(duì)定位（absolute）
在前端開發(fā)中，相對(duì)于已定位的最近的父類元素，如果沒有已定位的最近的父類元素，那么它的位置就相對(duì)于最初的包含塊（如body）。絕對(duì)定位的框可以從它的包含塊向上、右、下、左移動(dòng)。
結(jié)果
四 .固定定位（fixed）
相對(duì)于瀏覽器窗口，其余的特點(diǎn)類似于絕對(duì)定位。fixed元素就是固定在瀏覽器某個(gè)位置的元素，絕對(duì)定位是固定在頁面的，如果滾動(dòng)滾動(dòng)條的話絕對(duì)定位的元素也會(huì)滾上去，fixed元素不會(huì)。
最后
這幾種定位方式各有千秋，很多小白就經(jīng)常問老李了，我們寫頁面的時(shí)候，這4種布局方式應(yīng)該用哪個(gè)呢？（這問題一聽就很小白了）
最后給大家說一下吧，在我們現(xiàn)在專業(yè)的前端開發(fā)工作中，用的最多的不是絕對(duì)定位，也不是相對(duì)定位，而是絕對(duì)定位和相對(duì)定位的結(jié)合使用。（小白：WTF????合體？？？）
并不是合體出現(xiàn)什么新的定位方法啦。而是我們?nèi)デ岸碎_發(fā)中的一種布局書寫規(guī)范：
父相子絕（即父元素使用相對(duì)定位，子元素使用絕對(duì)定位，一起結(jié)合實(shí)現(xiàn)布局。）
這種布局規(guī)范是現(xiàn)階段前端開發(fā)公認(rèn)的布局方法，也能避免很多錯(cuò)誤的出現(xiàn)。
到此這篇關(guān)于CSS中的四種定位區(qū)別詳解的文章就介紹到這了,更多相關(guān)css 四種定位的區(qū)別內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
css中的position屬性，position有四個(gè)值：absolute/relative/fixed/static(絕對(duì)/相對(duì)/固定/靜態(tài)(默認(rèn)))通過定位屬性可以設(shè)置一些不規(guī)則的布局，使用TLBR(top,left,bottom,r2020-03-22
CSS中定位有四種在不同的場(chǎng)景下有不同的作用，本文給大家介紹關(guān)于CSS中定位的相關(guān)知識(shí)，通過實(shí)例代碼截圖給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值2020-03-20
css3 transform導(dǎo)致子元素固定定位變成絕對(duì)定位的方法
這篇文章主要介紹了css3 transform導(dǎo)致子元素固定定位變成絕對(duì)定位的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下2020-03-06
css定位position引發(fā)的層級(jí)關(guān)系問題詳解
這篇文章主要介紹了css定位position引發(fā)的層級(jí)關(guān)系問題詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來2020-02-10
深入學(xué)習(xí)CSS中如何使用定位(小結(jié))
這篇文章主要介紹了深入學(xué)習(xí)CSS中如何使用定位(小結(jié))，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)2019-12-30
這篇文章主要介紹了詳解css粘性定位position：sticky問題采坑的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下2019-08-26
