DIV CSS布局總結

2021-08-26 04:41:46 字數 1156 閱讀 6122

float:內容不會覆蓋

1.f子塊內容脫離父塊,故父塊高度變小

2.f子塊左、右浮動,f子塊的寬度變小

a)父塊的padding-left+f塊的margin-left

3.n子塊上移,且內容環繞f子塊,

a)n子塊邊框、背景色撐滿父塊,但內容不會和f塊重疊,而是環繞

b)n子塊內容保持著f塊設定的margin

c)給n子塊也設float則n子塊不再環繞f子塊,會併排向父塊浮動靠近

4.應用:首字放大、**環繞

5.如果沒有父塊,則把body想象為父塊 注:

父塊(n子塊、n子塊)=》父塊(f子塊、n子塊)=》父塊(f子塊、f子塊)

=》父塊(f子塊、n子塊、n子塊)=》父塊(f子塊、f子塊、n子塊)

position取值:內容會覆蓋

1.static預設值,塊保持在應該在的位置上,沒有任何移動效果

2.absolute絕對位置(相對body)

a)a子塊不再屬於父塊,故父塊高度變小

b)n塊上移

c)top、right、bottom、left相對頁面body各邊距離

d)可通過z-index層疊

3.relative(相對父塊)

a)r子塊根據top、left等移動,但寬度不變,所以邊框會超出父塊,避免:可指定寬度

b)r子塊仍屬於父塊,故不會影響父塊高度、其它n塊的位置

c)不可層疊

4.fixed

a)本質上和absolute一樣,不過塊不會隨著瀏覽器的滾動條向上或者向下移動

b)ie6、ie7不支援,故不推薦使用

注:top、right、bottom、left只有當position為absolute或relative時才有效

left/right,top/bottom不要同時設定四個,不然ie和火狐會顯示不同

用於調整垂直頁面方向的各塊之間的重疊高低關係

1.值大的位於值小的上方

2.預設0

e:\workspace-nfjd\aiweb\webcontent\aiweb3.0\css\tabpanel.css

當a裡面由於padding-top使文字下移後,造成背景也移到了,可使用background-position-y:0px;定位

div css布局漫談

1.css布局常用的方法 float none left right 取值 none 預設值。物件不飄浮 left 文字流向物件的右邊 right 文字流向物件的左邊 它是怎樣工作的,看個一行兩列的例子 xhtml 這裡是第一列 這裡是第二列 css wrap column1 column2 cle...

常用div css布局

1.css布局常用的方法 float none left right 取值 none 預設值。物件不飄浮 left 文字流向物件的右邊 right 文字流向物件的左邊 它是怎樣工作的,看個一行兩列的例子 xhtml 這裡是第一列 這裡是第二列 css wrap column1 column2 cle...

Div CSS布局入門

頁面布局與規劃 在網頁製作中,有許多的術語,例如 css html dhtml xhtml等等。在下面的文章中我們將會用到一些有關於html的基本知識,而在你學習這篇入門教程之前,請確定你已經具有了一定的html基礎。下面我們就開始一步一步使用div css進行網頁布局設計吧。所有的設計第一步就是構...