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

目錄：

一、Div+Css佈局教程（-）CSS必備知識

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

1、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屬性清楚一下浮動，不然上面的佈局會影響到下面。

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

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

咱們看到kwstu-kid3跑到一、2的下面去了，緣由就是應爲kwstu-kid2使用了float屬性，解決方法能夠直接在kwstu-kid3裏面加入clear屬性

二、還有一種佈局中常見的問題，此處必定要看。

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

跟咱們想象的不同吧，咱們想象中應該是kwstu層把kid1和kid2包裹住纔對，爲何沒有達到咱們要的效果呢，緣由就是應該kid1和kid2使用了float屬性，此時可使用clear屬性清楚一下便可。

通常狀況都是在css裏面建立一個.clear公共清除浮動類，直接使用一個div調用便可

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

2.還有一個初學div時常常遇到的問題，若是把上邊的clear層去掉，而後再在kwstu層下面開始一行新的佈局，而後在下面新的div中使用margin-top屬性，確定無論用。這個地方是初學者佈局中確定要遇到的問題，必定要注意。

解決辦法：

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

1、CSS文本屬性