CSS定位佈局相關

 

本文檔包括CSS的 樣式 定位 框模型

 

若是文檔比較長，那麼當文檔向下滾動時，背景圖像也會隨之滾動。當文檔滾動到超過圖像的位置時，圖像就會消失。

您能夠經過 background-p_w_upload 屬性防止這種滾動。經過這個屬性，能夠聲明圖像相對於可視區是固定的（fixed），所以不會受到滾動的影響：

body 

  {

  background-p_w_picpath:url(/i/eg_bg_02.gif);

  background-repeat:no-repeat;

  background-p_w_upload:fixed

  }

 

  能夠利用 background-position 屬性改變圖像在背景中的位置

  background-position:center;

 

  若是須要在頁面上對背景圖像進行平鋪，可使用 background-repeat 屬性。

  body

  { 

  background-p_w_picpath: url(/i/eg_bg_03.gif);

  background-repeat: repeat-y;

  }

 

縮進文本

把 Web 頁面上的段落的第一行縮進，這是一種最經常使用的文本格式化效果

CSS 提供了 text-indent 屬性，該屬性能夠方便地實現文本縮進。

p {text-indent: 5em;}

 

字間隔

word-spacing 屬性能夠改變字（單詞）之間的標準間隔。其默認值 normal 與設置值爲 0 是同樣的。

word-spacing 屬性接受一個正長度值或負長度值。若是提供一個正長度值，那麼字之間的間隔就會增長。爲 word-spacing 設置一個負值，會把它拉近：

p.spread {word-spacing: 30px;}

p.tight {word-spacing: -0.5em;}

 

<p class="spread">

This is a paragraph. The spaces between words will be increased.

</p>

 

<p class="tight">

This is a paragraph. The spaces between words will be decreased.

</p>

 

 

字間隔

word-spacing 屬性能夠改變字（單詞）之間的標準間隔。其默認值 normal 與設置值爲 0 是同樣的。

word-spacing 屬性接受一個正長度值或負長度值。若是提供一個正長度值，那麼字之間的間隔就會增長。爲 word-spacing 設置一個負值，會把它拉近：

 

字母間隔

letter-spacing 屬性與 word-spacing 的區別在於，字母間隔修改的是字符或字母之間的間隔。

 

可是對於漢字來講word-spacing不起做用，letter-spacing屬性才能控制兩個漢字之間的距離

 

 

HTML列表

無序列表

無序列表是一個項目的列表，此列項目使用粗體圓點（典型的小黑圓圈）進行標記。

無序列表始於 <ul> 標籤。每一個列表項始於 <li>。

<ul>

<li>Coffee</li>

<li>Milk</li>

</ul>

瀏覽器顯示以下：

.Coffee

.Milk

 

有序列表

一樣，有序列表也是一列項目，列表項目使用數字進行標記。

有序列表始於 <ol> 標籤。每一個列表項始於 <li> 標籤。

<ol>

<li>Coffee</li>

<li>Milk</li>

</ol>

瀏覽器顯示以下：

Coffee

Milk

列表項內部可使用段落、換行符、圖片、連接以及其餘列表等等。

 

定義列表

自定義列表不只僅是一列項目，而是項目及其註釋的組合。

自定義列表以 <dl> 標籤開始。每一個自定義列表項以 <dt> 開始。每一個自定義列表項的定義以 <dd> 開始。

<dl>

<dt>Coffee</dt>

<dd>Black hot drink</dd>

<dt>Milk</dt>

<dd>White cold drink</dd>

</dl>

瀏覽器顯示以下：

Coffee

Black hot drink

Milk

White cold drink

 

定義列表的列表項內部可使用段落、換行符、圖片、連接以及其餘列表等等。

 

 

CSS 定位機制

CSS 有三種基本的定位機制：普通流、浮動和絕對定位。

除非專門指定，不然全部框都在普通流中定位。也就是說，普通流中的元素的位置由元素在 (X)HTML 中的位置決定。

塊級框從上到下一個接一個地排列，框之間的垂直距離是由框的垂直外邊距計算出來。

行內框在一行中水平佈置。可使用水平內邊距、邊框和外邊距調整它們的間距。可是，垂直內邊距、邊框和外邊距不影響行內框的高度。由一行造成的水平框稱爲行框（Line Box），行框的高度老是足以容納它包含的全部行內框。不過，設置行高能夠增長這個框的高度。

 

CSS position 屬性

經過使用 position 屬性，咱們能夠選擇 4 種不一樣類型的定位，這會影響元素框生成的方式。

position 屬性值的含義：

static

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

relative

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

absolute

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

fixed

元素框的表現相似於將 position 設置爲 absolute，不過其包含塊是視窗自己。

提示：相對定位實際上被看做普通流定位模型的一部分，由於元素的位置相對於它在普通流中的位置。

 

 

position：relative

相對定位回按照元素的原始位置對該元素進行移動

 

 

position：absolute

經過絕對定位，元素能夠放置到頁面上的任何位置。

 

position:fixed

 

固定定位，滾動條不管如何滾動，它始終位於窗口的某一個地方

 

 

若是元素中的內容超出了給定的寬度和高度屬性，overflow 屬性能夠肯定是否顯示滾動條等行爲

overflow：scroll 用滾動條顯示，出現滾動條

overflow:hidden 隱藏超出部份內容

 

 

clear 屬性規定元素的哪一側不容許其餘浮動元素

圖像的左側和右側均不容許出現浮動元素：

img

  {

  float:left;

  clear:both;

  }