CSS學習筆記(增加中)

2010-5-21

1、line-height:行高。就是文字行與行之間的高度。就是兩行文字之間基準的距離。那麼基準是什麼呢？就是如果給文字加上底線那麼底線的位置就是文字的基準。

但是很多教科書把此屬性翻譯成行距。按我理解，漢字的行距應該是(line-height)-(font-size)的值才是真正體現在頁面上的行與行的間距。

個人感覺學習CSS最好配合。這個屬性翻譯過來的都不能準確表達CSS標準的意思，還是要在腦海中用圖去解構他們。

樣本：

p.one{font-size:10pt;line-height:8pt}/*行間距小於字型大小。效果就是部分文字會重疊*/

p.third{line-height:1.5em /*行間距，相對數值*/}

 

代碼

<p class="third">風格龍寬九段發令各方都離開高考裂縫的黃豆粉剛回家快遞方式換個地方很廣闊的少廢話狗idsafudfghdf更何況浮雕砂更厲害第三方個地方軍更將快遞風格的非搜狐積分卡浪費據黑龍江護林防火拿回來.風格龍寬九段發令各方都離開高考裂縫的黃豆粉剛回家快遞方式換個地方很廣闊的少廢話狗idsafudfghdf更何況浮雕砂更厲害第三方個地方軍更將快遞風格的非搜狐積分卡浪費據黑龍江護林防火拿回來.</P>

 2、通過X-Y座標軸理解margin,padding的正負數值問題。正值代表什麼，負的又如何理解呢?

比如img{foat:left;margin-right:50px;margin-bottom:25px}

<img src="test.jpg"/><p>一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字</p>

那麼圖片居左，文字在右，至今有50及25形成的距離。如果margin-right:-50px呢？那麼文字會有一部分疊在圖片上？如何理解這些數值體現的位置呢？

我想用X軸Y軸的座標來解構這些比較適合。預設情況片和文字緊貼在一起（如果沒有任何預設值的話），當margin-right為正時，在圖片右側即X軸上留出50Px，表示這塊被我空出了，其它元素不用佔用了。如果是負值，表示我把我本身從右側開始向左扣出50px,你可以用我的這個50px,負距離,那就是你中有我我中有你了嘛。 

3、float的理解。參看http://www.w3school.com.cn/css/pr_class_float.asp

float 屬性定義元素在哪個方向浮動。以往這個屬性總應用於映像，使文本圍繞在映像周圍，不過在 CSS 中，任何元素都可以浮動。浮動元素會產生一個塊級框，而不論它本身是何種元素。

如果浮動非替換元素，則要指定一個明確的寬度；否則，它們會儘可能地窄。注釋：假如在一行之上只有極少的空間可供浮動元素，那麼這個元素會跳至下一行，這個過程會持續到某一行擁有足夠的空間為止。預設值：none.那麼float:left該如何理解呢？按照上面的定義，就是浮動在左側的一個儘可能窄的塊級框.但是這跟text-aligh:left又有何區別呢？而且如何體現這個浮動字眼呢？ 浮動浮動，為什麼不是浮在文字上面而是佔了位置呢？參看這篇轉載來的詳細介紹float的文章吧http://apps.hi.baidu.com/share/detail/3602929。有點明白。原來float是描述一個元素浮動至某一側並停下的表現方式，具體的就是通過定義的left或者right浮動到left或者right的邊緣。浮動元素的定位還是基於正常的文檔流，然後從文檔流中抽出並儘可能遠的移動至左側或者右側。元素浮動後將自動轉為區塊層級元素。你應該為所有的浮動元素設定寬度屬性（除非是＜img＞元素，因其具有隱含的寬度）。如果不設定寬度，結果將是不可預知的

4、有float就誕生了clear:both,就是讓float周圍的元素要不要緊跟著它。一般常用clear:both。那麼元素就不會緊跟著它。

<div style="float:left;height:80px" >ABCD</div><div style="clear:both">EFGH</div>

 

5、dl,dt,dd的用法。

dl ——define

list——定義列表
dt ——define list title——用於組建定義列表中各清單項目的標題，重複使用可以定義多個清單項目的標題。 dd——define list define——用於組建定義列表各清單項目的解說文字段，重複使用可以定義多個解說文字段。dt和dd中可以再加入 ol ul li和P

樣本：

<dl>

<dt>標題</dt>

<dd>內容 1</dd>

<dd>內容2</dd>

</dl>

6、margin,padding不是有上右下左4個值？如果是margin:6px auto,padding:7px 8px,這隻設定2個值表示什麼意思呢？前面值表示上下，後面值表示左右 。

還有一種情況margin:6px;padding:6px,只有一個值又是什麼意思呢？表示上下左右都是這個值。

 

7、*{margin:0;padding:0}。萬用字元，你在windows搜尋裡或者搜尋引擎搜尋裡都可以用，值“所有”如“*.jpg”、“*.asp”就是說，調用這個css的頁面所有元素都運用萬用字元裡聲明的屬性，而不是預設的 。作用是為了避免一些瀏覽器差異。但是對於這個萬用字元用法存在爭論，主要是效能方面，詳見http://hi.baidu.com/koen_li/blog/item/092306e692600c22b83820ea.html

8、背景定位（background-position）。

background-position 屬性用來控制背景圖片在元素中的位置。技巧是，實際上指定的是圖片左上方相對於元素左上方的位置。

 

下面的例子中，設定了一個背景圖片並且用 background-position 屬性來控制它的位置，同時也設定了 background-repeat 為 no-repeat。計量單位是像素。第一個數字表示 x 軸（水平）位置，第二個是 y 軸（垂直） 位置。

/* 例 1： 預設值 */

background-position： 0 0; /* 元素的左上方 */

/* 例 2： 把圖片向右移動 */

background-position： 75px 0;

/* 例 3： 把圖片向左移動 */

background-position： -75px 0;

/* 例 4： 把圖片向下移動 */

background-position： 0 100px;

background-position 屬性可以用其它數值，關鍵詞和百分比來指定，這比較有用，尤其是在元素尺寸不是用像素設定時。

關鍵詞是不用解釋的。x 軸上：

* left

* center

* right

y 軸上：

* top

* center

* bottom

順序方面和使用像素值時的順序幾乎一樣，首先是 x 軸，其次是 y 軸，像這樣：

background-position： top right;

使用百分數時也類似。需要主要的是，使用百分數時，瀏覽器是以元素的百分比數值來設定圖片的位置的 

 

background： 《color》 《image》 《position》 《attachment》 《repeat》

例如，下面的聲明

background-color： transparent;

background-image： url（image.jpg）;

background-position： 50% 0 ;

background-attachment： scroll;

background-repeat： repeat-y;

可以合為單獨一行：

background： transparent url（image.jpg） 50% 0 scroll repeat-y;

而且不需要指定每一個值。如果省略值地話，就使用屬性地預設值。例如，上面那行和下面這個效果一樣：

background： url（image.jpg） 50% 0 repeat-y;