目錄：
注：本教程要求對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文本屬性