如何用css進行網頁佈局

要使網頁頁面美觀 我們需要對網頁進行大小 、背景圖片(或背景顏色)、以及網頁內的文字和網頁的所屬小的版塊位置的設定

　　1.網頁基本屬性的構成

border:延用HTML中對外框的設定 利用border可以對頁面的框體進行設定 例如框體的線條樣式 線條顏色 以及線條的畫素大小

eg: 程式碼所示為一個1畫素且為紅色的實線框

當設定好一個具體的線框 我們需要的.就是將內容填充到所設定的內容框體裡

background-image或background-color就是將框內填充可見的元素

background-image意為背景圖片 後接URL地址連線

background-color意為背景顏色 兩者使用都較為簡單 沒有特別需要注意的事項

text-indent 使用此屬性可以將文字的間距縮小 後接畫素值 (改變的是瀏覽器預設的文字間隙)

使文字美觀 還需要對文字的字型進行設定

需要加入的屬性是font-family 將所要的字型的加在font-family後面 如果要匯入外部字型 則需要加入屬性font-face

設定文字與邊框的距離需要設定文字的內外邊框 padding 和margin

padding:

其基本屬性

padding-top

padding-right

padding-botton

padding-left

margin:

其基本屬性

margin-top

margin-right

margin-bottom

margin-left

使用margin來設定文字與邊框的距離可以在很大程度上減少定位的難題

　　2、定位概述

需要理解的是CSS是在重疊的佈局中發揮作用 所以把頁面的所有元素視為框

而區分這些框的是塊級元素和行內元素

而定位就是利用塊級和行級元素的特性對頁面進行排版、來達到使你能夠自由移動你想要移動的區域 讓元素出現在合適的位置

position:

包含的元素有：

static:

元素框正常生成。塊級元素生成一個矩形框，作為文件流的一部分，行內元素則會建立一個或多個行框，置於其父元素中。

relative:

元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所佔的空間仍保留。

absolute:

元素框從文件流完全刪除，並相對於其包含塊定位。包含塊可能是文件中的另一個元素或者是初始包含塊。元素原先在正常文件流中所佔的空間會關閉，就好像元素原來不存在一樣。元素定位後生成一個塊級框，而不論原來它在正常流中生成何種型別的框。

fixed:

元素框的表現類似於將 position 設定為 absolute，不過其包含塊是視窗本身。

運用position元素需要注意元素是相對於視窗的哪一個點進行位移

float:

此元素可將元素脫離到原來的文件流

可用值有

float-left

float-right

可實現將文字圍繞圖片、建立水平選單、段落字母浮動左側的效果

clear:

清除

規定了哪一側不允許元素漂浮