學習目標

1、css浮動屬性詳解

2、Css文字屬性

3、Css列表屬性

4、Css背景屬性

5、Css邊框屬性

一、Css浮動屬性詳解

無論多麼複雜的佈局，其基本出發點均是：“如何在一行顯示多個div元素”。

顯然標準流已經無法滿足需求，這就要用到浮動。

浮動可以理解為讓某個div元素脫離標準流，漂浮在標準流之上，和標準流不是一個層次。

1.是麼是浮動元素的脫離文件流？

首先要知道，div是塊級元素，在頁面中獨佔一行，自上而下排列，也就是傳說中 標準流（網頁的正常排版順序）。

脫離文件流：就是脫離正常的網頁排版順序。成為浮動流（浮動後的元素就是浮動流）。

簡單來說當某一個元素浮動之後，那麼這個元素看上去就像被從標準流中刪除了一樣，這個就是脫離文件流。

浮動規律：假如某個div元素A是浮動的，如果A元素上一個元素也是浮動的，那麼A元素會跟隨在上一個元素的後邊（如果一行放不下這兩個元素，那麼A元素會被擠到下一行；）

如果A元素上一個元素是標準流中的元素，那麼A的相對垂直位置不會改變，也就是說A的頂部總是和上一個元素的底部對齊。

Div的順序是HTML程式碼中div的順序決定的。

2.浮動元素脫離文件流之後會有什麼影響？

如果前面一個元素浮動了，而後面一個元素沒有浮動，那麼這個時候前面一個元就會蓋住後面一個元素。元素浮動之前，也就是在標準流中，是豎向排列的，而浮動之後可以理解為橫向排列。

3.清除浮動是為了解決高度塌陷問題和元素重疊問題。

4.清除浮動的方法：

（1）新增空盒子，較流行。缺點是為清除浮動，頁面新增的空盒子較多，會造成冗餘程式碼，新手容易暈菜。定義：在被浮動的元素（同級元素）後面新增一個空的div，並且定義一個類名，賦給空div。語法：.clear{clear:both;}

（2）Overflow:hidden,較簡單，相容市面上大部分瀏覽器。缺點：做開發時，有些公司會嚴格要求開發技術點，不建議使用。定義：先定義一個類名，然後把定義好的類名賦給浮動元素的父級元素。語法：.clear{overflow:hidden;}

（3）最流行、最常用、可相容所有瀏覽器。稱之為萬能清除法。非要說缺點就是程式碼量大。開發推薦使用。定義：定義一個類名，使用偽元素：after，並把類名賦給浮動元素的父級元素。語法：.clear：after{display:block;clear:both;content:”.”;visivility:hidden;height:0;}clear{zoom:1;}

對於css的清除浮動（clear），一定要牢記：這個規則只能影響使用清除的元素本身，不能影響其他元素。

二、Css文字屬性

1）文字大小：{font-size：value；}

說明：

A）屬性值為數值型時，必須給屬性值加單位，屬性值為0時除外；

B）單位還可以是pt，9pt=12px；

C）為了減小系統間的字型顯示差異，IE Netscape（網景通訊公司）Mozilla的瀏覽器製作商於1999年召開會議，共同確定16px/ppi為標準字型大小預設值，即1em預設情況下，1em=16px，0.75em=12px；

2）文字顏色：{color：顏色值；}

說明：

用十六進位制（是計算機中資料的一種表示方法）表示顏色值：

0 1 2 3 4 5 6 7 8 9

0 1 2 3 4 5 6 7 8 9 A B C D E F

顏色模式：光色模式

R G B

FF 00 00

顏色值的縮寫：

當表示三原色的三組數字同時相同時，可以縮寫成為三位；

當用十六進位制表示顏色值時，需要在顏色值前加“#”

fa 00 00

3）文字字型：{font-family：字型1，字型2，字型3；}

說明：瀏覽器首先會尋找字型1，如存在就使用改字型來顯示內容，如在字型1不存在的情況下，則會尋找字型2，如字型2也不存在，按字型3顯示內容，如果字型3也不存在；

則按系統預設字型顯示；

當字型是中文字型時，需加雙引號；

當英文字型中有空格時，需加雙引號如（“Times News Roman”）

當英文字型只有一個單片語成是不加雙引號；如（Arial）；

Windows中文版本作業系統下，中文預設字型為宋體或者新宋體，英文字型預設為Arial.

4）文字加粗

Font-weight：border(更粗的)/bold(加粗)/normal（常規）/100-900;

說明：在css規範中，把字型的粗細分為9個等級，分別為100-900，其中100對應最輕的字型變形，而900對應最重的字型變形。

100-400一般

500常規字型

600-900加粗字型

5）文字傾斜

font-style：italic/oblique/normal（取消傾斜，常規顯示）；

說明：

Italic和oblique都是向右傾斜的文字，但區別在於italic是指斜體字，而oblique是傾斜的文字，對於沒有斜體的字型應該使用oblique屬性值來實現傾斜的文字效果。

6）水平對齊方式

{text-align:left/right/center/justify(兩端對齊);}

7）文字行高{line-height:normal/value;}

說明：

A）當單行文字的行高等於容器高時，可實現單位文字在容器中垂直方向居中對齊；

B）當單行文字的行高小於容器高時，可實現單行文字在容器中垂直中齊以上任意位置的定位；

C）當單行文字的行高大於容器高時，可實現單行文字在容器中垂直中齊以下任意位置的定位。(IE6以下版本存在瀏覽器相容問題)

*文字屬性簡寫：font：12px/24px”宋體”；

Font屬性的簡寫：字號，行高，字型

Font-size:12px;line-height：24px；font-family：”宋體“；

Font屬性的簡寫：

說明：font的屬性值應按以下次序書寫（各個屬性之間用空格隔開）

順序：font-style font-weight font-size/line-height font-family

（1）簡寫時，font-size和line-height只能通過斜槓、組成一個值，不能分開寫。

（2）順序不能改變，這種簡寫法只有在同時指定font-size和font-family屬性時才起作用，而且你沒有設定font-weight，font-style，他們會使用預設值（預設值）。

8）文字修飾

Text-decoration:none/underline/overline/line-through

說明：

None：沒用修飾

Underline：新增下劃線

Overline：新增上劃線

Line-through：新增刪除線

9）首行縮排：{text-indent:2em;}

說明：首行縮排2個字text-indent:2em;

A）text-indent可以取負值；

B）text-indent屬性只對第一行起作用。

10）字間距{letter-spacing:value;}

控制英文字母或漢字的字距。（英文字母和字母）

三、Css列表屬性

1）定義列表符號樣式

list-style-type：disc(實心圓)/circle（空心圓）/none（去掉列表符號）；list-style-type:none===list-style:none;

2）使用圖片作為列表符號

List-style-image：url（所使用圖片的路徑及全稱）；

3）定義列表符號的位置

List-style-position:outside(外邊)/inside(裡邊)；

List-style：none；去掉列表符號

四、Css背景屬性

1）背景顏色

語法：選擇符{background-color:顏色值；}

2）背景圖片的設定

語法：background-image:url(背景圖片的路徑及全稱)；

說明：

網頁上有兩種圖片形式：插入圖片、背景圖；

插入圖片：屬於網頁內容，也就是結構。

背景圖：屬於網頁的表現，背景圖可以顯示文字、插入圖片、表格等。

背景圖片的顯示原則：

A）容器尺寸等於圖片尺寸，背景圖片正好顯示在容器中

B）容器尺寸大於圖片尺寸，背景圖片將預設平鋪，直至鋪滿元素。

C）容器尺寸小於圖片尺寸，只顯示元素範圍以內的背景圖。

3）背景圖片平鋪屬性

語法：選擇符{background-repeat:no-repeat/repeat/repeat-x/repeat-y}

No-repeat:不平鋪

Repeat：平鋪

Repeat-x：橫向平鋪

Repeat-y：縱向平鋪

4）背景圖的固定

語法：

Fixed固定，不隨內容一塊滾動；

Scroll：隨內容一塊滾動。

5）背景圖片的位置

語法：選擇符

{background-position:left/center/right/數值 top/center/bottom/數值；}

水平方向上的對齊方式（left/center/right）或值

垂直方向上的對齊方式（top/center/bottom)或值

Background-position:值1值2;

兩個值：第一個值表示水平位置的值，第二個值：表示垂直位置的值。

當兩個值都是centerd的時候寫一個值就可以代表的是水平位置和垂直位置

說明：向左方向，向上方向是負值

背景屬性的縮寫語法：

Background：屬性值1屬性值2屬性值3；

背景縮寫：background（背景圖片的路勁及全稱）no-repeat center top #f00；

網頁上常用的圖片格式（壓縮圖片）

1）jpg：有失真壓縮格式，靠損失圖片本身的質量來減小圖片的體積，適用於顏色豐富的影象；（畫素點組成的，畫素點越多會越清晰）如果為網友中；

2）Gif：有失真壓縮格式，靠損失圖片的色彩數量來減小圖片的體積，支援透明，支援動畫，適用於顏色數量較少的影象；

3）Png：有失真壓縮格式，損失圖片的色彩數量來減小圖片的體積，支援透明，不支援動畫，是firework的原始檔格式，適用於顏色數量較少的影象；

五、Css邊框屬性

Border：邊框寬度 邊框風格 邊框顏色；

例如：border:5px solid #ff0000

邊框：border，網頁中很多修飾性線條都是由邊框來實現的。

邊框寬度：border-width：

邊框顏色：border-color：

邊框樣式：border-style：solid（實線）/dashed（虛線）/dotted(點劃線)/double（雙線）可單獨設定一方向邊框，

Border-bottom:邊框寬度 邊框風格 邊框顏色；底邊框

Border-left:邊框寬度 邊框風格 邊框顏色；左邊框

Border-right：邊框寬度 邊框風格 邊框顏色；右邊框

Border-top：邊框寬度 邊框風格 邊框顏色；上邊框