眾所周知,乙個頁面可能包含多個div,如何對這些div進行排列,以便具有較好的顯示效果呢?
css提供了浮動和定位兩個屬性進行div的排列,下面主要針對浮動和定位進行詳細地闡述。
(一)何為浮動?
浮動即是讓div塊向左或者向右靠攏,向左浮動(float:left);向右浮動(float:right).
向左或者向右浮動時,當浮動塊碰到前乙個塊或者邊框時,則停止浮動。
例如:1、向左浮動
想左浮動,即是div塊向左邊移動,直到div塊碰到左邊框或者另乙個div塊,如上圖右側所示,**如下
html檔案:
左浮動1
左浮動2
左浮動3
左浮動4
左浮動5
左浮動6
左浮動7
左浮動8
左浮動9
css檔案:
.div1
.div21
2、向右浮動
向右浮動,即是div塊向右邊移動,直到div塊碰到右邊框或者另乙個div塊,如上圖左側所示,**如下
html檔案:
右浮動1
右浮動2
右浮動3
css檔案:
.div1
.div2
#special
(二)何為定位?
只進行div塊左右浮動,顯然不能滿足我們對網頁的排版要求,這就要求我們對div的位置進行定位,利用div塊的位置,進行排列。
div塊的位置可以分為:靜態位置、相對位置、絕對位置、固定位置。
1、 針對相對定位:
2、絕對定位
(三)優先順序的屬性z-index
number 的值越大,優先順序越高,越靠上。number的值可以為負。
css之浮動與定位
文件布局中,常常用到浮動與定位。一 浮動 浮動使塊級元素從正常文件流中刪除,向左或向右浮動。但是其他元素會環繞該元素,因此仍然會影響布局。浮動元 素相對與包含塊的內邊界 內容區 進行浮動。浮動可以用於使塊級元素排成一列,也可以形成兩列或三列布局。注意問題 浮動元素時,可能會出現父元素容器塌陷的問題。...
CSS定位 浮動定位
css定位機制 浮動定位 float屬性 進行浮動定位 left,right clear屬性 清除浮動 left,right,both float屬性 1.概述 div實現橫向多列布局 float屬性 left 左浮動 right 右浮動 none 不浮動 下圖為 的實現 float屬性用途 在 混...
css浮動定位
請看下圖,當把框 1 向右浮動時,它脫離文件流並且向右移動,直到它的右邊緣碰到包含框的右邊緣 如果把所有三個框都向左移動,那麼框 1 向左浮動直到碰到包含框,另外兩個框向左浮動直到碰到前乙個浮動框。在 css 中,我們通過 float 屬性實現元素的浮動。浮動框旁邊的行框被縮短,從而給浮動框留出空間...