一 心得體會(huì)
前面學(xué)習(xí)了HTML元素構(gòu)建網(wǎng)頁(yè)結(jié)構(gòu)，學(xué)習(xí)了css文字屬性和文本屬性景描，今天在頁(yè)面修飾方面更進(jìn)一步十办，學(xué)習(xí)到了背景、邊框超棺、列表向族、鏈接這些方面的樣式設(shè)置，發(fā)現(xiàn)了一些以前遺漏的知識(shí)點(diǎn)棠绘，比如背景樣式中的background-attachment屬性件相，這個(gè)以前基本沒(méi)用到，看了之后覺(jué)得效果還是可以的氧苍，再今后的頁(yè)面中可以使用到夜矗。最大的收獲還是image的使用，突然發(fā)現(xiàn)image還可以用到邊框让虐、文本甚至列表中紊撕，覺(jué)得很神奇了，這個(gè)可以單獨(dú)寫(xiě)一篇學(xué)習(xí)筆記了赡突。
二相關(guān)知識(shí)點(diǎn)
1 背景（background）
要了解背景應(yīng)用对扶，我們需要先搞清楚盒模型。盒模型分為標(biāo)準(zhǔn)盒模型和怪異盒模型（ie盒模型）惭缰。
- 標(biāo)準(zhǔn)盒模型中width/height為內(nèi)容的寬/高浪南，盒子總寬度/高度=width/height+padding+border+margin。
- 怪異盒模型中width/height為內(nèi)容+padding+border的寬/高从媚，盒子總寬度/高度=width/height+margin逞泄。
在最初的瀏覽器中，不同瀏覽器會(huì)根據(jù)自己來(lái)選擇盒模型模式拜效，為了達(dá)到兼容的目的，我們一般在頁(yè)面上加上一個(gè)DOCTYPE的聲明標(biāo)簽各谚，這樣就都默認(rèn)使用標(biāo)準(zhǔn)盒模型（不考慮ie8及以下遠(yuǎn)古版本）紧憾。那如果我們需要使用怪異模型怎么辦呢？css3給我們?cè)黾恿艘粋€(gè)很棒的屬性——box-sizing昌渤，其語(yǔ)法為
box-sizing : content-box || border-box || inherit;
當(dāng)屬性值為content-box時(shí)赴穗，盒模型為標(biāo)準(zhǔn)盒模型；為border-box |時(shí)，盒模型為怪異盒模型般眉；為inherit時(shí)了赵，將從父元素繼承。
注：width/height/border/padding都是單獨(dú)占用空間的甸赃，而margin并非單獨(dú)占用空間柿汛，比如兩個(gè)相鄰的div的margin都是200px，那么這兩個(gè)div中間的間距只有200px埠对。
有了上述的相關(guān)知識(shí)后我們?cè)賮?lái)看背景络断，背景應(yīng)用的范圍時(shí)box-sizing的范圍，其主要屬性及屬性值如下：
/*為背景設(shè)置一個(gè)純色*/
background-color: <color> | transparent(默認(rèn)) | inherit
/*指定在元素的背景中出現(xiàn)的背景圖像(這可以是靜態(tài)文件项玛，也可以是生成的漸變)*/
background-image: <url> | none(默認(rèn)) |inherit
/*指定背景應(yīng)該出現(xiàn)在元素背景中的位置*/
background-position: position-x position-y
/*指定背景是否應(yīng)該被重復(fù)(平鋪)*/
background-repeat: repeat(默認(rèn)) | repeat-x | repeat-y | no-repeat | inherit
/*當(dāng)內(nèi)容滾動(dòng)時(shí)貌笨，指定元素背景的行為，例如襟沮，它是滾動(dòng)的內(nèi)容锥惋，還是固定的?*/
background-attachment: scoll(默認(rèn)) | fixed | local
/*在一行中指定以上五個(gè)屬性的縮寫(xiě)*/
background:[<bg-color>||<background-image>||<background-repeat>||<background-position>||<background-attachment>] | inherit
/*允許動(dòng)態(tài)調(diào)整背景圖像的大小*/
background-size: contain | cover | <length>
注：
- 所有背景屬性不能繼承！？膀跌！
- 背景還可以時(shí)漸變色，示例代碼如下（更多信息請(qǐng)查找gradient屬性）：
/* linear-gradient屬性為css3屬性硅则，對(duì)瀏覽器版本有要求淹父，不過(guò)可以滿足目前大部份最新瀏覽器，ie8及以下版本瀏覽器請(qǐng)自行查找兼容方法*/
background: linear-gradient(to bottom, #000000 0%,#ffffff 100%);
- 背景圖和背景色應(yīng)同時(shí)指定怎虫，這樣背景圖不可用時(shí)背景色會(huì)替代
- 背景位置
background-position通常情況為兩個(gè)參數(shù)：橫向位移和豎向位移暑认，可以是數(shù)值或者百分比（默認(rèn)均為0%），偏移后的坐標(biāo)點(diǎn)為背景圖中心的坐標(biāo)點(diǎn)大审。當(dāng)然也可以用top/bottom/center蘸际，left/right/center這兩組參數(shù)替代；甚至還可以只用top/bottom/center/left/righ中的一個(gè)參數(shù)替代徒扶，這樣意味著另外一個(gè)方向上的參數(shù)為center粮彤。例如background-position:top的含義其實(shí)是background-position:top center或者background-position:center top。
2 邊框（border）
1.邊框可以分開(kāi)寫(xiě)（border-width）姜骡，也可以合并寫(xiě)（border）导坟，還可以單邊寫(xiě)（border-top）。
邊框常用屬性有：
border-width: <length> | inherit
border-style: none | hidden | dotted | solid | dashed | double | groove | ridge | inset | outset | inherit
border-color: <color< | inherit
合并的語(yǔ)法為：
border: border-width border-style border-color
單邊（以上邊框?yàn)槔┑恼Z(yǔ)法為：
border-top: border-width border-style border-color
注：當(dāng)邊框樣式為 groove | ridge | inset | outset時(shí)圈澈，邊框的顏色要適當(dāng)?shù)稽c(diǎn)惫周，否則看不出效果
2.邊框還可以加（橢）圓角，其語(yǔ)法為：
border-radius: <length> | <percentage>
length用數(shù)值表示圓形的半徑(單數(shù)值)或者橢圓的半長(zhǎng)軸康栈，半短軸（雙數(shù)值并用“/”分開(kāi)）递递，負(fù)值無(wú)效：
border-radius: 30px; /*圓形*/
border-radius: 30px/60px; /*橢圓*/
percrntage用百分比表示圓形的半徑(單數(shù)值)或者橢圓的半長(zhǎng)軸喷橙，半短軸（雙數(shù)值并用“/”分開(kāi)），負(fù)值無(wú)效：
border-radius: 30%; /*圓形*/
border-radius: 30%/60%; /*橢圓*/
注：當(dāng)百分比有兩個(gè)數(shù)值是登舞，第一個(gè)數(shù)值是width的百分比贰逾，第二個(gè)數(shù)值是height的百分比。
定義（橢）圓角順序是以左上角開(kāi)始菠秒，按順時(shí)間方向疙剑，跟padding/margin一樣，border-radius可以簡(jiǎn)寫(xiě)稽煤。下面舉兩個(gè)例子可以清楚的看出border-radius的用法:
border-radius: 1em/5em;
/* 等價(jià)于： */
border-top-left-radius: 1em 5em;
border-top-right-radius: 1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius: 1em 5em;
border-radius: 4px 3px 6px / 2px 4px;
/* 等價(jià)于： */
border-top-left-radius: 4px 2px;
border-top-right-radius: 3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius: 3px 4px;
3.邊框圖像（border-image）
這個(gè)暫時(shí)用的不多核芽，準(zhǔn)備下次總結(jié)圖像的特殊使用方法時(shí)詳解。
3 列表樣式
基本屬性如下：
- 符號(hào)樣式（list-style-type）：列表前標(biāo)記的類型酵熙，其在ol和ul中有效轧简，在dl中無(wú)效；主要屬性值有 none | circle | square | decimal 等等匾二，更多可以查看相關(guān)文檔哮独。注：ol和dl本質(zhì)上就是list-style-type屬性值不同。
- 列表符號(hào)位置（list-style-position）：表明列表前面符號(hào)的位置察藐，其屬性值為 outside（默認(rèn)）| inside皮璧。當(dāng)屬性值為outside時(shí)，列表符號(hào)不占內(nèi)容位置分飞，其位于padding中悴务；當(dāng)屬性值為inside時(shí)，列表符號(hào)占用內(nèi)容位置譬猫。
- 列表標(biāo)記圖像（list-style-image）：用圖像替代列表符號(hào)讯檐，其屬性值為圖片的url。注：list-style-image會(huì)覆蓋掉list-style-type染服；我們也盡量不要使用這個(gè)屬性别洪，因?yàn)槠涑叽绮荒芨淖儯荒茏赃m應(yīng)屏幕大小柳刮，可以使用背景替代挖垛。
4 鏈接樣式
鏈接樣式其實(shí)就是該鏈接在不同的狀態(tài)下顯示的文本樣式，具體的文本樣式我們之前有講過(guò)秉颗，這里就不贅述了痢毒，具體我們來(lái)說(shuō)一說(shuō)鏈接的幾個(gè)狀態(tài)及表示方式。
- a:link - 普通的蚕甥、未被訪問(wèn)的鏈接
- a:visited - 用戶已訪問(wèn)的鏈接
- a:hover - 鼠標(biāo)指針位于鏈接的上方
- a:active - 鏈接被點(diǎn)擊的時(shí)刻
通過(guò)以上偽類+樣式可以設(shè)置鏈接在不同狀態(tài)下的顯示形式闸准。
