我們都知道，前端開發(fā)里面的CSS中常用的定位方式有

普通定位，相對定位，絕對定位、固定定位定位這四種。

但是很多零基礎(chǔ)的前端小白都不知道這4種定位方式都有什么作用和區(qū)別，在使用的時候都很不靈活，要知道，想做好網(wǎng)頁布局，這4個定位方式都是精髓呀，學好定位布局，前端開發(fā)輕輕松松！

那么今天我們就來講解一下CSS中這4種定位的作用和區(qū)別！幫助大家搞清楚這4種布局的妙用！

一、普通定位(Static)

在我們的開發(fā)過程中，除非專門指定，否則所有框都在普通流中定位。普通流中元素框的位置由元素在(X)HTML中的位置決定。塊級元素從上到下依次排列，框之間的垂直距離由框的垂直margin計算得到。行內(nèi)元素在一行中水平布置。這個就不過多描述了。

二 . 相對定位（relative）

在我們前端開發(fā)中，relative相對定位一直被看作普通文檔流定位模型的一部分，定位元素的位置相對于它在普通流中的位置進行移動。使用相對定位的元素不管它是否進行移動，元素仍要占據(jù)它原來的位置。移動元素會導致它覆蓋其他的框。

結(jié)果

三 . 絕對定位（absolute）

在前端開發(fā)中，相對于已定位的最近的父類元素，如果沒有已定位的最近的父類元素，那么它的位置就相對于最初的包含塊（如body）。絕對定位的框可以從它的包含塊向上、右、下、左移動。

結(jié)果

四 .固定定位（fixed）

相對于瀏覽器窗口，其余的特點類似于絕對定位。fixed元素就是固定在瀏覽器某個位置的元素，絕對定位是固定在頁面的，如果滾動滾動條的話絕對定位的元素也會滾上去，fixed元素不會。

最后

這幾種定位方式各有千秋，很多小白就經(jīng)常問老李了，我們寫頁面的時候，這4種布局方式應(yīng)該用哪個呢？（這問題一聽就很小白了）

最后給大家說一下吧，在我們現(xiàn)在專業(yè)的前端開發(fā)工作中，用的最多的不是絕對定位，也不是相對定位，而是絕對定位和相對定位的結(jié)合使用。（小白：WTF????合體？？？）

并不是合體出現(xiàn)什么新的定位方法啦。而是我們?nèi)デ岸碎_發(fā)中的一種布局書寫規(guī)范：

父相子絕（即父元素使用相對定位，子元素使用絕對定位，一起結(jié)合實現(xiàn)布局。）

這種布局規(guī)范是現(xiàn)階段前端開發(fā)公認的布局方法，也能避免很多錯誤的出現(xiàn)。 

到此這篇關(guān)于CSS中的四種定位區(qū)別詳解的文章就介紹到這了,更多相關(guān)css 四種定位的區(qū)別內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評論