半長軸和半短軸是什麼

一 心得體會

前面學習了HTML元素構建網頁結構，學習了css文字屬性和文字屬性，今天在頁面修飾方面更進一步，學習到了背景、邊框、列表、連結這些方面的樣式設定，發現了一些以前遺漏的知識點，比如背景樣式中的background-attachment屬性，這個以前基本沒用到，看了之後覺得效果還是可以的，再今後的頁面中可以使用到。最大的收穫還是image的使用，突然發現image還可以用到邊框、文字甚至列表中，覺得很神奇了，這個可以單獨寫一篇學習筆記了。

二相關知識點

1 背景（background）

要了解背景應用，我們需要先搞清楚盒模型。盒模型分為標準盒模型和怪異盒模型（ie盒模型）。

標準盒模型中width/height為內容的寬/高，盒子總寬度/高度=width/height+padding+border+margin。

怪異盒模型中width/height為內容+padding+border的寬/高，盒子總寬度/高度=width/height+margin。

在最初的瀏覽器中，不同瀏覽器會根據自己來選擇盒模型模式，為了達到相容的目的，我們一般在頁面上加上一個DOCTYPE的宣告標籤，這樣就都預設使用標準盒模型（不考慮ie8及以下遠古版本）。那如果我們需要使用怪異模型怎麼辦呢？css3給我們增加了一個很棒的屬性——box-sizing，其語法為

當屬性值為content-box時，盒模型為標準盒模型；為border-box |時，盒模型為怪異盒模型；為inherit時，將從父元素繼承。

注：

width/height/border/padding都是單獨佔用空間的，而margin並非單獨佔用空間，比如兩個相鄰的div的margin都是200px，那麼這兩個div中間的間距只有200px。

有了上述的相關知識後我們再來看背景，背景應用的範圍時box-sizing的範圍，其主要屬性及屬性值如下：

注：

1。所有背景屬性不能繼承！！！

2。背景還可以時漸變色，示例程式碼如下（更多資訊請查詢gradient屬性）：

3。背景圖和背景色應同時指定，這樣背景圖不可用時背景色會替代

4。背景位置background-position通常情況為兩個引數：橫向位移和豎向位移，可以是數值或者百分比（預設均為0%），偏移後的座標點為背景圖中心的座標點。當然也可以用top/bottom/center，left/right/center這兩組引數替代；甚至還可以只用top/bottom/center/left/righ中的一個引數替代，這樣意味著另外一個方向上的引數為center。例如background-position：top的含義其實是background-position：top center或者background-position：center top。

2 邊框（border）

1。邊框可以分開寫（border-width），也可以合併寫（border），還可以單邊寫（border-top）。

邊框常用屬性有：

合併的語法為：

單邊（以上邊框為例）的語法為：

注：

當邊框樣式為 groove | ridge | inset | outset時，邊框的顏色要適當淡一點，否則看不出效果

2。邊框還可以加（橢）圓角，其語法為：

length用數值表示圓形的半徑（單數值）或者橢圓的半長軸，半短軸（雙數值並用“/”分開），負值無效：

percrntage用百分比表示圓形的半徑（單數值）或者橢圓的半長軸，半短軸（雙數值並用“/”分開），負值無效：

注：

當百分比有兩個數值是，第一個數值是width的百分比，第二個數值是height的百分比。

定義（橢）圓角順序是以左上角開始，按順時間方向，跟padding/margin一樣，border-radius可以簡寫。下面舉兩個例子可以清楚的看出border-radius的用法：

3。邊框影象（border-image）

這個暫時用的不多，準備下次總結影象的特殊使用方法時詳解。

3 列表樣式

基本屬性如下：

符號樣式（list-style-type）：列表前標記的型別，其在ol和ul中有效，在dl中無效；主要屬性值有 none | circle | square | decimal 等等，更多可以檢視相關文件。

注：

ol和dl本質上就是list-style-type屬性值不同。

列表符號位置（list-style-position）：表明列表前面符號的位置，其屬性值為 outside（預設）| inside。當屬性值為outside時，列表符號不佔內容位置，其位於padding中；當屬性值為inside時，列表符號佔用內容位置。

列表標記影象（list-style-image）：用影象替代列表符號，其屬性值為圖片的url。

注：

list-style-image會覆蓋掉list-style-type；我們也儘量不要使用這個屬性，因為其尺寸不能改變，不能自適應螢幕大小，可以使用背景替代。

4 連結樣式

連結樣式其實就是該連結在不同的狀態下顯示的文字樣式，具體的文字樣式我們之前有講過，這裡就不贅述了，具體我們來說一說連結的幾個狀態及表示方式。

a：link - 普通的、未被訪問的連結

a：visited - 使用者已訪問的連結

a：hover - 滑鼠指標位於連結的上方

a：active - 連結被點選的時刻

透過以上偽類+樣式可以設定連結在不同狀態下的顯示形式。