久久无码中文字幕_日韩精品无码一本二本三_久久精品呦女暗网_欧美一级夜夜爽_久久精品国产99久久99久久久

23
2017/02

在 CSS 中,用 float 和 position 這兩種布局方式有什么不同?

發(fā)布時間:2017-02-23 08:51:28
發(fā)布者:jiangbing
瀏覽量:
0

其實float最初是用來調(diào)節(jié)包圍文字的,position是用來調(diào)節(jié)文檔流中位置的,  float和position這兩者并沒有孰好孰不好的問題,兩者按需使用,各得所需的效果。

float從字面上的意思就是浮動。float能讓元素從文檔流中抽出,它并不占文檔流的空間,典型的就是圖文混排中文字環(huán)繞圖片的效果了。并且float這也是目前使用最多的網(wǎng)頁布局方式。不過需要注意的是清除浮動是你可能需要注意的地方。并且如果你要考慮到古老的IE6之類的還會有一些bug諸如雙邊距等等問題。


而position顧名思義就是定位。他有以下這幾種屬性:static(默認),relative(相對定位),absolute(絕對定位)和fixed(固定定位)。其中static和relative會占據(jù)文檔流空間,他們并不是脫離文檔的。absolute和fixed是脫離文檔流的,不會占據(jù)文檔流空間。

比較可以發(fā)現(xiàn),float和position最大的區(qū)別其實是是否占據(jù)文檔流空間的問題。雖然position有absolute和fixed這兩個同樣不會占據(jù)文檔流的屬性,但是這兩個并不適合被用來給整個網(wǎng)頁做布局。為什么?因為這樣你就得為頁面上的每一個元素設(shè)置一個xy坐標來定位。



float布局就顯得靈活多了。但是一些特殊的地方搭配relative和absolute布局可以實現(xiàn)更好的效果。因為absolute是基于父級元素的定位,當父級元素是relative的時候,absolute的元素就會是基于它的定位了。比如你可以讓一個按鈕始終顯示在一個元素的右下角。

所以position和float是兩個概念,按需所用。

關(guān)鍵詞:
返回列表