使用div css布局

2021-05-23 15:21:05 字數 1719 閱讀 5625

—————————————————————————使用div/css布局—————————————————————————

1.如何實現固定寬度且居中的版式?

#container

這樣設定後在頁面的body中頂層放置乙個container層就能實現固定寬頻且居中的版式,頁面所有的內容都在這個層中。

注意,這個container是最頂層,其他的所用層都要巢狀在這個層中。一般來說,將這個最頂層設定為絕對寬度,其內的層設定為相對寬度,

即百分比,這樣有助於整體的調節,提高可移植性。

2.平行層之間的關係:

所謂平行層就是指巢狀在同乙個父層中的子層。可以將平行層的關係分成兩種:垂直排列層和水平排列層。

>>垂直排列層

層塊(div)預設的顯示方式就是垂直顯示,也就是說每個div塊占用一行,是行級元素。

這裡假定父層的寬度和高度都是給定的(實際情況也正是這樣)。

我們自己定義的層必然要有其屬性才行,一般的屬性這樣設定:

#mydiv

>>水平排列層

通過上面的分析知道預設情況下的div是行級元素,但是如果希望在同乙個父層下同級div同行顯示,也是有辦法的。

(1). 在div中設定這樣乙個屬性會使得div變為非行級元素,即能夠在一行顯示(從左向右依次排列)。

display:inline-block;    //注意,不能寫成display:inline;

(2). 上面的方法可以使得div在一行內從左向右依次顯示,但是往往有這種需求:在乙個層中最左面有乙個層,最右面有乙個層。

這時可以指定div的浮動方向:float:left或者float:right

(3). 關於水平同行層換行的說明:將層設定為同行顯示之後,層就會由左向右依次排列,但是假若一行之中的層有很多,一行排列不完,

那麼就要換行顯示了。這裡的換行是自動的,頁面會自動地找到換行點。

3.巢狀層之間的關係:

所謂巢狀層,就是父層中的子層,整個頁面就是由不同的層巢狀形成的。前面說到,頁面中所有的內容就是放在乙個叫做container的層之中,也就是說,

其它層都是這個層的子層或者巢狀子層。這裡重點研究父層與其直接子層之間的關係。

這裡假定給出的父層屬性引數確定:

#outer

首先對父層的padding屬性做以下說明:padding是設定內層邊框距離外層邊框的距離,他是以內層為基準的,也就是說:

父層會根據自身的padding值調整自己距離內層邊框的距離,而內層不會由於外層padding值而變化。這裡的padding值表示

了上下左右四個值,還可以逐個設定:padding-top,padding-right,padding-bottom,padding-left.

好了,下面說說子層:

#inner

注意,一般來說,子層的屬性值往往會決定父層的表現————比如,子層寬度高度超出父層的寬度高度,這樣就導致了傳說中的內容溢位。

為了解決這個問題就牽扯到了前面說過的overflow屬性。一般情況下,程式設計師保證子層寬度不會溢位,這樣就可以只關心高度上的溢位。

通常將overflow設定為auto,這樣如果將高度設定為最小高度值:min-height:**px;那麼父層就會自動增高,

如果將高度設定為絕對高度值,那麼父層就會出現滾動條。

如果將overflow設定為hidden,那麼溢位的部分將不顯示在頁面上。

另外需要注意的一點是子層的margin屬性,它不會導致父層移動,但會由於margin值導致子層移動從而導致內容溢位。

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進行網頁布局設計吧。所有的設計第一步就是構...