CSS布局與傳統表格(table)布局最大的區別在于:原來的定位都是采用表格,通過表格的間距或者用無色透明的GIF圖片來控制文布局版塊的間距;而現在則采用層(P)來定位,通過層的margin,padding,border等屬性來控制版塊的間距。
分析一個典型的定義P例子:
#sample{ MARGIN: 10px 10px 10px 10px;說明如下:
下面是這個層的實際表現:
這里是演示內容,這里是演示內容,這里是演示內容,這里是演示內容,這里是演示內容,這里是演示內容,這里是演示內容,這里是演示內容,
這里是演示內容,這里是演示內容,
這里是演示內容,這里是演示內容,
這里是演示內容...我們可以看到邊框是2px的灰色,背景圖片在右下沒有重復,內容距離上和左邊框20px,內容居中,一切和預想的一樣。hoho,雖然不好看,但它是最基本的,掌握了它,你就已經學會一半的CSS布局技術了。就是這樣,不算難吧!(另一半是什么?另一半是層與層之間的定位。我會在后面逐步講解。)
自從1996年CSS1的推出,W3C組織就建議把所有網頁上的對像都放在一個盒(box)中,設計師可以通過創建定義來控制這個盒的屬性,這些對像包括段落、列表、標題、圖片以及層<P>。盒模型主要定義四個區域:內容(content)、邊框距(padding)、邊界(border)和邊距(margin)。上面我們講的sample層就是一個典型的盒。對于初學者,經常會搞不清楚margin,background-color,background-image,padding,content,border之間的層次、關系和相互影響。這里提供一張盒模型的3D示意圖,希望便于你的理解和記憶。
用XHTML+CSS布局,有一個技術一開始讓你不習慣,應該說是一種思維方式與傳統表格布局不一樣,那就是:所有輔助圖片都用背景來實現。類似這樣:
BACKGROUND: url(images/bg_poem.jpg) #FEFEFE no-repeat right bottom;盡管可以用<img>直接插在內容中,但這是不允許的。這里的"輔助圖片"是指那些不是作為頁面要表達的內容的一部分,而僅僅用于修飾、間隔、提醒的圖片。例如:相冊中的圖片、圖片新聞中的圖片,上面的3d盒模型圖片都屬于內容的一部分,它們可以用<img>元素直接插在頁面里,而其它的類似logo,標題圖片,列表前綴圖片都必須采用背景方式或者其他CSS方式顯示。
這樣做的原因有2點:
40個可愛粉色兒童房設計裝修設計2018-04-22
100款國外食品包裝設計集包裝設計2017-07-17
40幅日本海報設計作品海報設計2017-07-04
46款茶品牌和包裝設計欣賞包裝設計2017-04-14
20款現代簡約風格名片設計名片設計2016-04-18
59款日本優秀logo設計欣賞標志設計2016-03-29
10個CSS簡寫/優化技巧CSS教程2013-06-04
css的margin縮寫方式CSS教程2012-05-23
CSS網頁布局時常犯的幾種CSS教程2009-09-28
CSS浮動屬性Float詳解CSS教程2009-09-17
CSS定位屬性Position詳解CSS教程2009-09-17
CSS布局教程:絕對定位和相CSS教程2009-07-15