Div+Css布局教程（-）CSS必備知識

標籤：white   block   body   osi   long   簡寫   text   share   img   

目錄：

1、Div+Css布局教程（-）CSS必備知識

註：本教程要求對html和css有基礎瞭解。

一、CSS布局屬性

Width：設定對象的寬度（width:45px）。

Height：設定對象的高度(Height:45px;)。

Background：設定對象的背景顏色、背景映像。

1.背景顏色

background:#09F;

2.背景映像

background:url(file:///C|/Users/Administrator/Desktop/huipu.jpg) repeat-x;

repeat-x代表橫向重複，還可以設定repeat-y。

Float: Float屬性是DIV+CSS布局中最基本也是最常用的屬性，用於實現多列功能，我們知道<div>標籤預設一行只能顯示一個，而使用Float屬性可以實現一行顯示多個div的功能，最直接解釋方法就是能實現表格版面配置的多列功能。

Float屬性有left、right、none三個值，none預設屬性不用管，主要是left和right兩個屬性最常用。

舉例：

1.float:left屬性

?

1

 

 

2.float:right屬性

Margin: Margin屬性用於設定兩個元素之間的距離。（註：在IE6中預設是此屬性的雙倍值，如何解決請看hack css）

Margin屬性設定值說明：

1.單獨設定

margin-left:20px;設定左邊

margin-right:20px;設定右邊

同理上下分別是margin-top:20px;、margin-bottom:20px;

2.簡寫設定

Margin:10px;設定對象四周。

Margin:10px 5px;設定對象上下為10px,左右為5px;

舉例：

Padding: Padding屬性用於設定一個元素的邊框與其內容的距離。

1.單獨設定

padding-left:20px;設定左邊

padding-right:20px;設定右邊

同理上下分別是padding-top:20px;、padding-bottom:20px;

2.簡寫設定

padding:10px;設定對象四周。

padding:10px 5px;設定對象上下為10px,左右為5px;

Clear: Clear屬性主要是清楚float屬性設定的效果，使用Float屬性設定一行有多個DIV後（多列），最好在下一行開始之前使用Clear屬性清楚一下浮動，否則上面的布局會影響到下面。

1、如何在上面的例子中橙色方塊的下面另起一行放置一個黑色方塊。

我們直接在html中加入一個div試試

我們看到kwstu-kid3跑到1、2的下面去了，原因就是應為kwstu-kid2使用了float屬性，解決方案可以直接在kwstu-kid3裡面加入clear屬性

2、還有一種布局中常見的問題，此處一定要看。

我們把最外層kwstu屬性的高度去了，看看什麼效果。

跟我們想象的不一樣吧，我們想象中應該是kwstu層把kid1和kid2包裹住才對，為什麼沒有達到我們要的效果呢，原因就是應該kid1和kid2使用了float屬性，此時可以使用clear屬性清楚一下即可。

一般情況都是在css裡面建立一個.clear公用清除浮動類，直接使用一個div調用即可

此問題還有一個解決辦法：直接在kwstu樣式中加入overflow:hidden;屬性即可。

2.還有一個初學div時經常遇到的問題，如果把上邊的clear層去掉，然後再在kwstu層下面開始一行新的布局，然後在下面新的div中使用margin-top屬性，肯定不管用。這個地方是初學者布局中肯定要遇到的問題，一定要注意。

解決辦法：

在kwstu層和kwstu1層直接加一個清除浮動層即可。

一、CSS文字屬性

所屬分類： DIV+CSS頁面配置

Div+Css布局教程（-）CSS必備知識