點選連結：http://note.youdao.com/noteshare?id=02dbcb3ade7cd5a7fe2c327fc6404ee0

下面是直接複製貼上，沒有圖片且亂版

理解CSS
1.CSS標準化
一開始：具有相同名稱的屬性採用不同的方式處理，只能用瀏覽器特定的屬性訪問瀏覽器特定的功能。
規範：CSS3
2.盒模型
CSS中的一個基本概念是盒模型（box model）。可見元素會在頁面中佔據一個矩形區域，該區域就是元素的盒子（box），由四部分組成。

1.元素盒子有兩個部分是可見的：內容和邊框。
2.內邊框：內容和邊框之間的空間。
3.外邊框：邊框和頁面上其他元素之間的空間。

元素還可以包含其他元素。
父元素的內容盒子稱為子元素的塊容器（container block），通常稱為容器。

3.選擇器簡明參考
CSS選擇器
選擇器 說明

•   		選取所有元素
  

選取指定型別的元素
. 選取指定類的元素
# 選取id屬性為指定值的元素
[attr] 選取定義了attr屬性，且屬性值任意的元素
[attr=“val”] 選取定義了attr屬性，且屬性值為val的元素
[attr^=“val”] 選取定義了attr屬性，且屬性值以val字串打頭的元素
[attr$=“val”] 選取定義了attr屬性，且屬性值以val字串結尾的元素
[attr*=“val”] 選取定義了attr屬性，且屬性值包含val字串的元素
[attr~=“val”] 選取定義了attr屬性，且屬性值包含多個值，而其中一個為val的元素
[attr|=“val”] 選取定義了attr屬性，且屬性值是以連字元分割的一串值，而第一個為val的元素
<選擇器>,<選擇器> 選取同時匹配所有選擇器的元素
<選擇器> <選擇器> 目標元素為匹配第一個選擇器的元素的後代，且匹配第二個選擇器
<選擇器>><選擇器> 目標元素為匹配第一個選擇器的元素的直接後代，且匹配第二個選擇器
<選擇器>+<選擇器> 目標元素緊跟在匹配第一個選擇器的元素之後，且匹配第二個選擇器
<選擇器>~<選擇器> 目標元素跟在匹配第一個選擇器的元素之後，且匹配第二個選擇器
::first-line 選取塊級元素文字的首行
::first-letter 選取塊級元素文字的首字母
:before 在選取元素之前或之後插入內容
:after
:root 選取文件中的根元素
:first-child 選取元素的第一個子元素
:last-child 選取元素的最後一個子元素
:only-child 選取元素的唯一一個子元素
:only-of-type 選取屬於父元素的特定型別的唯一子元素
:nth-child(n) 選取父元素的第n個子元素
:nth-last-child(n) 選取父元素的倒數第n個子元素
:nth-of-type(n) 選取屬於父元素的特定型別的第n個子元素
:nth-last-of-type(n) 選取屬於父元素的特定型別的倒數第n個子元素
:enabled 選取已啟用的元素
:disabled 選取被禁用的元素
:checked 選取所有選中的複選框和單選按鈕
:default 選取預設元素
:valid 選取基於輸入驗證判定的有效或者無效的input元素
:invalid
:in-range 選取被限定在指定範圍之內或者之外的input元素
:out-of-range
:required 根據是否允許使用required屬性選取input元素
:optional
:link 選取未訪問的連結元素
:visited 選取使用者已訪問的連結元素
:hover 選取滑鼠指標懸停在其上面的元素
:active 選取當前被使用者啟用的元素，這通常意味著使用者即將點選該元素
:focus 選取獲得焦點的元素
:not(<選擇器>) 否定選擇（如選擇所有不匹配<選擇器>的元素）
:empty 選取不包含任何子元素或文字的元素
:lang(<語言>) 選取lang屬性為指定值的元素
:target 選取URL片段識別符號指向的元素

4.屬性簡明參考
1.邊框和背景屬性
屬性 說明
background 設定所有背景值的簡寫屬性
background-attachment 設定元素的背景附著屬性，決定背景圖片是否隨頁面一起滾動
background-clip 設定元素的背景顏色和影象的裁剪區域
background-color 設定背景顏色
background-image 設定元素背景影象
background-origin 設定背景影象繪製的起始位置
background-position 設定背景影象在元素盒子中的位置
background-repeat 設定背景影象的重複方式
background-size 設定背景影象的繪製尺寸
border 為所有邊界設定所有邊框寬度的簡寫屬性
border-bottom 為所有下邊框設定寬度的簡寫屬性
border-bottom-color 為所有下邊框設定顏色
border-bottom-left-radius 將邊框左下角設定為圓角
border-bottom-right-radius 將邊框右下角設定為圓角
border-bottom-style 設定元素下邊框的樣式
border-bottom-width 設定元素下邊框的寬度
border-color 設定四條邊框的顏色
border-image 使用影象作為邊框的簡寫屬性
border-image-outset 指定影象向邊框盒外部擴充套件的區域
border-image-repeat 指定邊框影象的縮放和重複方式
border-image-slice 指定邊框影象的切割方式
border-image-source 設定邊框影象的來源路徑
border-image-width 設定邊框影象的寬度
border-left 設定元素左邊框的簡寫屬性
border-left-color 設定左邊框的顏色
border-left-style 設定左邊框的樣式
border-left-width 設定左邊框的寬度
border-radius 指定圓角邊框的簡寫屬性
border-right 設定元素右邊框的簡寫屬性
border-right-color 設定右邊框的顏色
border-right-style 設定右邊框的樣式
border-right-width 設定右邊框的寬度
border-style 設定所有邊框樣式的簡寫屬性
border-top 設定上邊框的簡寫屬性
border-top-color 設定上邊框的顏色
border-top-left-radius 將邊框左上角設定為圓角
border-top-right-radius 將邊框右上角設定為圓角
border-top-style 設定上邊框的樣式
border-top-width 設定上邊框的寬度
border-width 設定四個邊框的寬度
box-shadow 設定元素的一個或者多個陰影效果
outline-color 設定元素邊框外圍輪廓線的顏色
outline-offset 設定輪廓距離元素邊框邊緣的偏移量
outline-style 設定輪廓的樣式
outline-width 設定輪廓的寬度
outline 在一條宣告中設定輪廓的簡寫屬性

2.盒模型屬性
基本的盒子屬性
選擇器 說明
box-sizing 設定要應用盒子尺寸相關屬性的元素
clear 設定盒子的左邊界、右邊界或左右兩個邊界不允許出現浮動元素
display 設定元素盒子的型別
float 將元素移動到其包含塊的左邊界或者右邊界，或者另一個浮動元素的邊界
height 設定元素盒子的高度
margin 設定元素盒子四個外邊距寬度的簡寫屬性
margin-bottom 設定盒子下外邊距的寬度
margin-left 設定盒子左外邊距的寬度
margin-right 設定盒子右外邊距的寬度
margin-top 設定盒子上外邊距的寬度
max-height 設定元素的最大高度
max-width 設定元素的最大寬度
min-height 設定元素的最小高度
min-width 設定元素的最小寬度
overflow 設定內容橫向和豎向溢位盒子時處理方式的簡寫屬性
overflow-x 設定內容橫向溢位盒子時的處理方式
overflow-y 設定內容豎向溢位盒子時的處理方式
padding 設定元素盒子四個內邊距寬度的簡寫屬性
padding-bottom 設定盒子下內邊距的寬度
padding-left 設定盒子左內邊框的寬度
padding-right 設定盒子右內邊框的寬度
padding-top 設定盒子上內邊框的寬度
visibility 設定元素的可見性
width 設定元素的寬度

3.佈局屬性
選擇器 說明
bottom 設定元素下外邊距邊界與包含塊下邊界之間的偏移
column-count 指定多列布局的列數
column-fill 多列布局中列與列之間的內容如何分佈
column-gap 指定多列布局中列與列之間的間隔
column-rule 多列布局中定義列與列之間的規則的簡寫屬性
column-rule-color 設定多列布局中的顏色規則
column-rule-style 設定多列布局中的樣式規則
column-rule-width 設定多列布局中的寬度規則
columns 在多列布局中設定列數和列寬度的簡寫屬性
column-span 指定多列布局中元素能跨多少列
column-width 指定多列布局中列的寬度
display 指定元素在頁面上的顯示方式
flex-align 它們都是由彈性盒子佈局定義的，目前還沒有實現
flex-direction
flex-order
flex-pack
left 設定元素左外邊距邊界與包含塊左邊界之間的偏移
position 設定元素的定位方法
right 設定元素右外邊距邊界與包含塊右邊界之間的偏移
top 設定元素上外邊距邊界與包含塊上邊界之間的偏移
z-index 設定定位元素的堆疊順序

4.文字屬性
屬性 說明
@font-face 指定網頁使用的字型
direction 指定文字方向
font 在一條宣告中設定文字字型、大小和顏色的簡寫屬性
font-family 指定文字所用的字體系列，排在前面的優先使用
font-size 指定字型大小
font-style 指定採用正常字型、斜體還是傾斜字型
font-variant 指定字型是否以小型大寫字母顯示
font-weight 設定文字粗細
letter-spacing 設定字母間距
line-height 設定行高
text-align 設定文字對齊方式
text-decoration 規定新增到文字的修飾（如下劃線）
text-indent 規定文字塊中首行文字的縮排
text-justify 設定文字對齊方式
text-shadow 指定文字塊的陰影效果
text-transform 控制文字塊字母大小寫
word-spacing 指定單詞間距

5.過渡、動畫和變換屬性
屬性 說明
@keyframes 為動畫指定一個以上的關鍵幀
animation 設定動畫的簡寫屬性
animation-delay 指定動畫開始前的延遲時間
animation-direction 指定動畫重複播放時的播放方向
animation-duration 指定動畫持續時間
animation-iteration-count 指定動畫的迴圈次數
animation-name 指定用於動畫的關鍵幀集合的名稱
animation-play-state 指定動畫狀態（播放或暫停）
animation-timing-function 指定關鍵幀之間計算屬性值的函式
transform 指定應用於元素的變換
transform-origin 指定元素變換的起點
transition 指定CSS屬性過渡效果的簡寫屬性
transition-delay 指定觸發過渡的延遲時間
transition-duration 指定過渡的持續時間
transition-property 指定帶有過渡效果的屬性
transition-timing-function 指定過渡期間計算中間屬性值的函式

6.其他屬性
屬性 說明
border-collapse 指定表格相鄰單元格的邊框的顯示樣式
border-spacing 指定相鄰單元格的邊框的距離
caption-side 指定表格標題的位置
color 設定元素的前景色
cursor 指定游標的形狀
empty-cells 指定是否顯示錶格中的空單元格
list-style 設定列表樣式的簡寫屬性
list-style-image 指定列表項標記使用的影象
list-style-position 指定列表項標記相對於列表項內容的位置
list-style-type 指定列表項標記的型別
opacity 設定元素的透明度
table-layout 指定表格單元格、行和列的演算法規則

使用CSS選擇器（第Ⅰ部分）
CSS選擇器的作用：找出某類元素。
1.使用CSS基本選擇器
進行比較寬泛的選擇。
1.選擇所有元素
*：通用選擇器，匹配文件中的所有元素，最基本的選擇器，少使用。
例：使用通用選擇器

Visit the Apress website

I like apples and oranges.

Visit the W3C website

2.根據型別選擇元素
指定元素型別為選擇器可以選取一個文件中該元素的所有例項。
例：使用元素型別選擇器

Visit the Apress website

I like apples and oranges.

Visit the W3C website

3.根據類選擇元素
類選擇器採用全域性屬性class匹配指定類的元素。
例：根據類選擇元素

Visit the Apress website

I like apples and oranges.

Visit the W3C website

PS：
1.選擇器.class2：選中指定class2的所有型別的元素。
2.這個選擇器兩種表示形式：
①使用通用選擇器：*.class2。
②不使用通用選擇器：.class2.
3.將與指定類匹配的元素限定為一種型別：將通用選擇器換為元素型別，如a.class2。
例：使用類選擇器匹配單一元素型別

Visit the Apress website

I like apples and oranges.

Visit the W3C website

4.根據ID選擇元素
使用ID選擇器可根據全域性屬性id的值選擇元素。
HTML文件中元素的id屬性的值必須唯一。
使用ID選擇器，查詢的必定是單個元素。
例：使用id選擇器

Visit the Apress website

I like apples and oranges.

Visit the W3C website

PS：使用元素的style屬性可以達到同樣的效果，不過只有跟其他選擇器組合使用，才能真正排上用場。

5.根據屬性選擇元素
使用屬性選擇器能基於屬性的不同方面匹配屬性。
1.使用通用選擇器可以匹配具有符合指定條件屬性的所有元素（或指定型別的所有元素）。
2.常用屬性選擇器：將選擇條件放到[和]字元之間。
例：使用元素屬性選擇器

Visit the Apress website

I like apples and oranges.

Visit the W3C website

PS：最簡單的屬性選擇器，它匹配的是所有具有href屬性的元素，而不管屬性具體值是什麼。

元素屬性選擇器的條件
條件 說明
[attr] 選擇定義attr屬性的元素，忽略屬性值
[attr=“val”] 選擇定義attr屬性，且屬性值為val的元素
[attr^=“val”] 選取定義了attr屬性，且屬性值以val字串打頭的元素
[attr$=“val”] 選取定義了attr屬性，且屬性值以val字串結尾的元素
[attr*=“val”] 選取定義了attr屬性，且屬性值包含val字串的元素
[attr~=“val”] 選取定義了attr屬性，且屬性值包含多個值，而其中一個為val的元素
[attr|=“val”] 選取定義了attr屬性，且屬性值是以連字元分割的一串值，而第一個為val的元素

PS：最後兩個條件：
1.處理支援多個值且不同的值用空格分割的屬性會用到~=條件，如全域性屬性class。
2.處理一個屬性中包括多條用連字元分割的資訊用|=條件，如全域性屬性lang。

例：基於多個屬性值中的一個選擇元素

Visit the Apress website

I like apples and oranges.

Visit the W3C website

例：使用|=屬性條件

Visit the Apress website

I like apples and oranges.

Visit the W3C website

2.複合選擇器
組合使用不同的選擇器可以匹配更特定的元素。
1.並集選擇器
建立由逗號分隔的多個選擇器可以將樣式應用到單個選擇器匹配的所有元素。
例：建立並集選擇器

Visit the Apress website

I like apples and oranges.

Visit the W3C website

2.後代選擇器
用於選擇包含在其他元素中的元素。
1.先應用第一個選擇器，再從匹配元素的後代中找出匹配第二個選擇器的元素。
2.後代選擇器會匹配任意包含在匹配第一個選擇器的元素中的元素，而不僅是直接子元素。
例：選擇後代

Visit the Apress website

I like apples and oranges.

Visit the W3C website

例：更復雜的後代選擇器示例

Name	City
Adam Freeman	London
Joe Smith	New York
Anne Jones	Paris

I like apples and oranges.

Name	City
Peter Pererson	Boston
Chuck Fellows	Paris
Jane Firth	Paris

3.選擇子元素
子代選擇器跟後代選擇器很像，不過只選擇匹配元素中的直接後代。
例：選擇子元素

Name	City
Adam Freeman	London
Joe Smith	New York
Anne Jones	Paris

I like apples and oranges.

Name	City
Peter Pererson	Boston
Chuck Fellows	Paris
Jane Firth	Paris

4.選擇兄弟元素
使用相鄰兄弟選擇器可以選擇緊跟在某元素之後的元素。
例：使用相鄰兄弟選擇器

Visit the Apress website

I like apples and oranges.

Visit the W3C website Visit Google

普通兄弟選擇器匹配的元素在指定元素之後，但不一定相鄰。
例：使用普通兄弟選擇器

Visit the Apress website

I like apples and oranges.

Visit the W3C website Visit Google

3.使用偽元素選擇器
偽選擇器分兩種：偽元素和偽類。
1.使用::first-line選擇器
::first-line選擇器匹配文字塊的首行。
例：使用::first-line偽元素選擇器

Fourscore and seven years ago our fathers brought forth on this continent a new nation,conceived in liberty,and dedicated to the proposition that all men are created equal.

I like apples and oranges.

Visit the W3C website

PS：偽元素選擇器也可以作為修飾符跟其他選擇器一塊使用。
例：選中p元素的首行
p::first-line作為選擇器

2.使用::first-letter選擇器
選擇文字塊的首字母。
例：使用::first-letter偽元素選擇器

Fourscore and seven years ago our fathers brought forth on this continent a new nation,conceived in liberty,and dedicated to the proposition that all men are created equal.

I like apples and oranges.

Visit the W3C website

3.使用:before和:after選擇器
會生成內容，並將其插入文件。
:before選擇器：將內容新增到元素前面。
:after選擇器：與:before類似，不過將內容新增到元素後面。
例：使用:before和:after選擇器

Visit the Apress website

I like apples and oranges.

Visit the W3C website

PS：content屬性只能跟偽選擇器一起使用。

4.使用CSS計數器
:before和:after選擇器經常跟CSS計數器特性一起使用，結合兩者可生成數值內容。
例：使用CSS計數器特性

Visit the Apress website

I like apples and oranges.

I also like mangos and cherries.

Visit the W3C website

PS：要建立計數器，需要使用專門的counter-reset屬性為計數器設定名稱。
counter-reset：paracount;
初始化名為paracount的計數器，將它的值設定為1。
counter-reset：paracount 10;
將值設定為指定的初始值，在計數器名稱後面新增一個數字。
counter-reset：paracount 10 othercounter;
建立兩個計數器：一個名為paracount，初始值為10；另一個名為othercounter，初始值為1。
content：counter(paracount)". “;
計數器初始化後就能夠作為content屬性的值，跟:before和:after選擇器一起使用來指定樣式。
這條宣告用在包含:before的選擇器中，其效果是將當前計數器的值呈現在選擇器匹配的所有元素之前，此處，還要在相應的值後面追加一個句點和空格。
計數器的值預設表示為十進位制整數，不過，也可以指定其他數值格式：
content：counter(paracount，lower-alpha)”. ";
lower-alpha引數：指定數值樣式。這個引數可以是list-style-type屬性支援的任意值。
counter-increment：paracount;
counter-increment屬性：專門用來設定計數器增量，該屬性的值是要增加計數器的名稱。
計數器預設增量為1。
counter-increment：paracount 2;
將計數器增量設定為指定數。

使用CSS選擇器（第Ⅱ部分）
偽類：不是直接針對文件元素的，而是為你基於某些共同特徵選擇元素提供方便。
1.使用結構性偽類選擇器
能夠根據元素在文件中的位置選擇元素。
這類選擇器都有一個冒號字元字首（：），例如：empty。
它們可以單獨使用，也可以跟其他選擇器組合使用，如p：empty。
1.使用根元素選擇器
：root選擇器匹配文件中的根元素。返回html元素。
例：使用：root選擇器

Visit the Apress website

I like apples and oranges.

Visit the W3C website

2.使用子元素選擇器
匹配直接包含在其他元素中的單個元素。
子元素選擇器
選擇器 說明
:first-child 選擇元素的第一個子元素
:last-child 選擇元素的最後一個子元素
:only-child 選擇元素的唯一子元素
:only-of-type 選擇元素指定型別的唯一子元素

1.使用:first-child選擇器
:first-child選擇器匹配由包含它們的元素（即父元素）定義的第一個子元素。
例：使用:first-child選擇器

Visit the Apress website

I like apples and oranges.

Visit the W3C website

例：組合使用:first-child選擇器和其他選擇器

Visit the Apress website

I like apples and oranges.

Visit the W3C website

2.使用:last-child選擇器
:last-child選擇器匹配由包含它們的元素定義的最後一個元素。
例：使用:last-child選擇器

Visit the Apress website

I like apples and oranges.

Visit the W3C website

3.使用:only-child選擇器
:only-child選擇器匹配父元素包含的唯一子元素。
例：使用:only-child選擇器

Visit the Apress website

I like apples and oranges.

Visit the W3C website

4.使用:only-of-type選擇器
:only-of-type選擇器匹配父元素定義型別的唯一子元素。
例：使用:only-of-type選擇器

Visit the Apress website

I like apples and oranges.

Visit the W3C website

3.使用:nth-child選擇器
:nth-child選擇器：可以指定一個索引以匹配特定位置的元素。
nth-child選擇器
選擇器 說明
:nth-child(n) 選擇父元素的第n個子元素
:nth-last-child(n) 選擇父元素的倒數第n個子元素
:nth-of-type(n) 選擇父元素定義型別的第n個子元素
:nth-last-of-type(n) 選擇父元素定義型別的倒數第n個子元素

這類選擇器都帶有一個引數，是你感興趣的元素的索引，索引從1開始。
例：使用:nth-child選擇器

Visit the Apress website

I like apples and oranges.

Visit the W3C website

2.使用UI偽類選擇器
使用UI偽類選擇器可以根據元素的狀態匹配元素。
UI選擇器
選擇器 說明
:enabled 選擇啟用狀態的元素
:disabled 選擇禁用狀態的元素
:checked 選擇被選中的input元素（只用於單選按鈕和複選框）
:default 選擇預設元素
:valid 根據輸入驗證選擇有效或者無效的input元素
:invalid
:in-range 選擇在指定範圍之內或者之外受限的input元素
:out-of-range
:required 根據是否允許:required屬性選擇input元素
:optional

1.選擇啟用或禁用元素
有些元素有啟用或者禁用狀態，這些元素一般是用來收集使用者輸入的。
:enabled和:disabled選擇器不會匹配沒有禁用狀態的元素。
例：使用:enabled選擇器

This is an enabled textarea This is a disabled textarea

2.選擇已勾選的元素
使用:checked選擇器可以選中由checked屬性或者使用者勾選的單選按鈕或者複選框。
例：使用:checked選擇器

Do you like apples: This will go red when checked

3.選擇預設元素
:default選擇器從一組類似的元素中的選擇預設元素。例如，提交按鈕總是表單的預設按鈕。
例：使用:default元素選擇器

Name:

Submit Vote Reset

4.選擇有效和無效的input元素
:valid和:invaild選擇器分別匹配符合和不符合它們的輸入驗證要求的input元素。

Name:

City:

Submit

5.選擇限定範圍的input元素
關於輸入驗證的一種具體程度更高的變體是選擇值限於指定範圍的input元素。
:in-range選擇器：匹配位於指定範圍內的input元素。
:out-of-range選擇器：匹配位於指定範圍之外的input元素。
例：使用:in-range和:out-of-range選擇器

$ per unit in your area:

6.選擇必需和可選的input元素
:required選擇器：匹配具有required屬性的input元素，這能夠確保使用者必需輸入與input元素相關的值才能提交表單。
:optional選擇器：匹配沒有required屬性的input元素。
例：選擇必需和可選的input元素

$ per unit in your area: $ per unit in your area:

3.使用動態偽類選擇器
它們根據條件的改變匹配元素，是相對於文件的固定狀態來說的。
1.使用:link和:visited選擇器
:link選擇器：匹配超級連結。
:visited選擇器：匹配使用者已訪問的超級連結。
對於使用者訪問過的連結，可在瀏覽器中設定保留已訪問狀態的時間。當用戶清除瀏覽器的歷史紀錄。或者歷史記錄自然超時，連結會返回未訪問狀態。
例：使用:link和:visited選擇器

Visit the Apress website

I like apples and oranges.

Visit the W3C website

2.使用:hover選擇器
:hover選擇器：匹配使用者滑鼠懸停在其上的任意元素。
滑鼠在HTML頁面內移動時，選中的元素樣式會發生改變。
例：使用:hover選擇器

Visit the Apress website

I like apples and oranges.

Visit the W3C website

3.使用:active選擇器
:active選擇器：匹配當前被使用者啟用的元素。
瀏覽器依然可以自行決定如何詮釋啟用，但多數瀏覽器會在滑鼠點選（在觸控式螢幕上是手指按壓）的情況下使用這個選擇器。
例：使用:active選擇器

Visit the Apress website

I like apples and oranges.

Hello

4.使用:focus選擇器
最後一個動態偽類選擇器是：focus選擇器，它匹配當前獲得焦點的元素。
例：使用:focus選擇器

Name:

City:

4.其他偽類選擇器
1.使用否定選擇器
:not選擇器：否定選擇器可以對任意選擇取反。
例：使用否定選擇器

Visit the Apress website

I like apples and oranges.

Visit the W3C website

2.使用:empty選擇器
:empty選擇器：匹配沒有定義任何子元素的元素。

3.使用:lang選擇器
匹配基於lang全域性屬性值的元素。
例：使用:lang選擇器

Visit the Apress website

I like apples and oranges.

Visit the W3C website

4.使用:target選擇器
匹配URL片段識別符號指向的元素。
例：使用:target選擇器

Visit the Apress website

I like apples and oranges.

Visit the W3C website

使用邊框和背景
1.應用邊框樣式
簡單邊框有三個關鍵屬性：
border-width：設定邊框的寬度。
border-style：設定繪製邊框使用的樣式。
border-color：設定邊框的顏色。

例：定義簡單的邊框

There are lots of different kinds of fruit -there are over 500 varieties of banana alone.By the we add the countless types of apples,oranges, and other well-known fruit,we are faced with thousands of choices.

1.定義邊框寬度
border-width屬性的取值
值 說明
<長度> 將邊框寬度值設為以CSS度量單位（如em、px、cm）表達的長度值
<百分數> 將邊框寬度值設為邊框繪製區域的寬度的百分數
Thin 將邊框寬度設為預設寬度，這三個值的具體意義是由瀏覽器定義的，不過，所有瀏覽器中這三
medium 個值代表的寬度依次增大。
thick

2.定義邊框樣式
border-style屬性的取值
值 說明
none 沒有邊框
dashed 破折線式邊框
dotted 圓點線式邊框
double 雙線式邊框
groove 槽線式邊框
inset 使元素內容具有內嵌效果的邊框
outset 使元素內容具有外凸效果的邊框
ridge 脊線邊框
solid 實線邊框

3.為一條邊應用邊框樣式
特定邊的邊框屬性
屬性 說明 值
border-top-width 定義頂邊 跟通用屬性的值一樣
border-top-style
border-top-color
border-bottom-width 定義底邊 跟通用屬性的值一樣
border-bottom-style
border-bottom-color
border-left-width 定義左邊 跟通用屬性的值一樣
border-left-style
border-left-color
border-right-width 定義右邊 跟通用屬性的值一樣
border-right-style
border-right-color

例：使用特定邊邊框屬性

There are lots of different kinds of fruit -there are over 500 varieties of banana alone.By the we add the countless types of apples,oranges, and other well-known fruit,we are faced with thousands of choices.

4.使用border簡寫屬性
我們也可以不用分開設定樣式、寬度和顏色，而使用簡寫屬性一次搞定。
border簡寫屬性
屬性 說明 值
border 設定所有邊的邊框 <寬度><樣式><顏色>
border-top 設定一條邊的邊框 <寬度><樣式><顏色>
border-bottom
border-left
bottom-right

可以在一行中指定寬度、樣式、顏色的值從而為這些屬性設定值，也可以用空格隔開。
例：使用border簡寫屬性

There are lots of different kinds of fruit -there are over 500 varieties of banana alone.By the we add the countless types of apples,oranges, and other well-known fruit,we are faced with thousands of choices.

5.建立圓角邊框
可以使用邊框的radius特性建立圓角邊框。
圓角邊框屬性
屬性 說明 值
border-top-left-radius 設定一個圓角 一對長度值或百分數值，百分數跟邊框盒子的寬
border-top-right-radius 度和高度相關
border-bottom-left-radius
border-bottom-right-radius
border-radius 一次設定四個角的簡寫屬性 一對或四隊長度值或百分數值，由/字元分割

例：建立圓角邊框

There are lots of different kinds of fruit -there are over 500 varieties of banana alone.By the we add the countless types of apples,oranges, and other well-known fruit,we are faced with thousands of choices.

使用border-radius簡寫屬性可以為邊框的四個角指定一個值，或者在一個值中包含四個值。
例：使用border-radius簡寫屬性

There are lots of different kinds of fruit -there are over 500 varieties of banana alone.By the we add the countless types of apples,oranges, and other well-known fruit,we are faced with thousands of choices.

There are lots of different kinds of fruit -there are over 500 varieties of banana alone.By the we add the countless types of apples,oranges, and other well-known fruit,we are faced with thousands of choices.

PS：每個段落分別有一個圓角邊框宣告。
1.第一條宣告只指定了兩個值，這一對值會應用到邊框的四個角上。
注意：要用/字元將水平半徑和垂直半徑隔開。
2.第二條宣告指定了8個值。
①.第一組四個值分別是四個角的水平半徑。
②.第二組四個值是相應的垂直半徑。

6.將影象用做邊框
邊框不僅限於用border-style屬性定義的樣式，我們可以使用影象為元素建立真正的自定義邊框。
配置影象邊框各個方面的屬性有5個，外加一個可以在一條宣告中配置所有特性的簡寫屬性。
border-image屬性
屬性 說明 值
border-image-source 設定影象來源 none或者url（<影象>）
border-image-slice 設定切分影象的偏移 1~4個長度值或者百分數，受影象的寬度和高度影響
border-image-width 設定影象邊框的寬度 auto或1~4個長度值或百分數
border-image-outset 指定邊框影象向外擴充套件的部分 1~4個長度值或者百分數
border-image-repeat 設定影象填充邊框區域的模式 stretch、repeat和round中的一個或兩個值
border-image 在一條宣告中設定所有值的簡寫屬性 跟單個屬性的值一

1.切分影象
將影象用做邊框的關鍵是切分影象。
開發人員指定影象邊框向內偏移的值，瀏覽器會使用這些值來將影象切分為9塊。
例：切分影象並將其用做邊框

There are lots of different kinds of fruit -there are over 500 varieties of banana alone.By the we add the countless types of apples,oranges, and other well-known fruit,we are faced with thousands of choices.

2.控制切分圖重複方式
為了填滿邊框的整個空間，切分圖被拉伸了。
我們可以改變影象重複方式，得到不同的呈現效果。
border-image-repeat屬性就能實現這個功能。
border-image-repeat樣式的值
值 說明
stretch 拉伸切分圖填滿整個空間，預設值
repeat 平鋪切分圖填滿整個空間（可能導致圖片被截斷）
round 在不截斷切分圖的情況下，平鋪切分圖並拉伸以填滿整個空間
space 在不截斷切分圖的情況下，平鋪切分圖並在圖片之間保留一定的間距以填滿整個空間

例：控制切分圖的重複樣式

There are lots of different kinds of fruit -there are over 500 varieties of banana alone.By the we add the countless types of apples,oranges, and other well-known fruit,we are faced with thousands of choices.

PS：我弄了沒有效果。。。

2.設定元素的背景
盒模型的另一個可見區域是元素的內容。
背景屬性
屬性 說明 值
background-color 設定元素的背景顏色，總是顯示在背景影象下面 <顏色>
background-image 設定元素的背景影象，如果指定一個以上的影象， none或url（影象）
則後面的影象繪製在前面的影象下面
background-repeat 設定影象的重複樣式
background-size 設定背景影象的尺寸
background-position 設定背景影象的位置
background-attachment 設定元素中的影象是否固定或隨頁面一起滾動
background-clip 設定背景影象裁剪方式
background-origin 設定背景影象繪製的起始位置
background 簡寫屬性

1.設定背景顏色和影象
設定元素背景的起點是設定背景顏色或者背景影象，也可以使用背景屬性同時設定兩者。
例：設定背景影象和顏色

There are lots of different kinds of fruit -there are over 500 varieties of banana alone.By the we add the countless types of apples,oranges, and other well-known fruit,we are faced with thousands of choices.

background-repeat屬性的值
值 說明
repeat-x 水平方向平鋪影象，影象可能被截斷
repeat-y 垂直方向平鋪影象，影象可能被截斷
repeat 水平和垂直方向同時平鋪影象，影象可能被截斷
space 水平或者垂直方向平鋪影象，但在影象與影象之間設定統一間距，確保影象不被截斷
round 水平或者垂直方向平鋪影象，但調整影象大小，確保影象不被截斷
no-repeat 禁止平鋪影象

我們可以單獨指定水平方向和垂直方向的重複樣式，要是隻有一個值的話，兩個方向均會使用同種重複樣式。
2.設定背景影象的尺寸
background-size屬性的值
值 說明
contain 等比例縮放影象，使其寬度、高度中較大者與容器橫向或縱向重合，背景影象始終包含在容器內
cover 等比例縮放影象，使影象至少覆蓋容器，有可能超出容器。
auto 預設值，影象以本身尺寸完全顯示

contain效果

cover效果

3.設定背景影象位置
瀏覽器使用background-position屬性設定背景影象的位置。影象不平鋪的時候這個屬性用得最多。
例：設定背景影象位置

There are lots of different kinds of fruit -there are over 500 varieties of banana alone.By the we add the countless types of apples,oranges, and other well-known fruit,we are faced with thousands of choices.

background-position屬性的值
值 說明
top 將背景影象定位到盒子頂部邊界
left 將背景影象定位到盒子左邊界
right 將背景影象定位到盒子右邊界
bottom 將背景影象定位到盒子底部邊界
center 將背景影象定位到中間位置

4.設定元素的背景附著方式
為具有視窗的元素應用背景時，可以指定背景附著內容的方式。
textarea是常用的具有視窗的元素，可以自動新增滾動條以顯示內容。
另一個例子是body元素，如果其中的內容比瀏覽器的視窗長，可以為其設定滾動條。
使用background-attachment屬性可以控制背景的附著方式。
background-attachment屬性的值
值 說明
fixed 背景固定到視窗上，即內容滾動時背景不動
local 背景附著到內容上，即背景隨內容一起滾動
scroll 背景固定到元素上，不會隨內容一起滾動

例：使用border-attachment屬性

There are lots of different kinds of fruit -there are over 500 varieties of banana alone.By the we add the countless types of apples,oranges, and other well-known fruit,we are faced with thousands of choices.

5.設定背景影象的開始位置和裁剪樣式
背景的起始點（origin）指定背景顏色和背景影象應用的位置。裁剪樣式決定了背景顏色和影象在元素盒子中繪製的區域。
background-origin和background-clip屬性的值
值 說明
border-box 在邊框盒子內部繪製背景顏色和背景影象
padding-box 在內邊距盒子內部繪製背景顏色和背景影象
content-box 在內容盒子內部繪製背景顏色和背景影象

例：使用background-origin屬性

There are lots of different kinds of fruit -there are over 500 varieties of banana alone.By the we add the countless types of apples,oranges, and other well-known fruit,we are faced with thousands of choices.

通過應用裁剪盒子，background-clip屬性決定了背景的哪一部分是可見的。
裁剪盒子之外的部分一律被丟棄，不會顯示。
例：使用background-clip屬性

There are lots of different kinds of fruit -there are over 500 varieties of banana alone.By the we add the countless types of apples,oranges, and other well-known fruit,we are faced with thousands of choices.

6.使用background簡寫屬性
使用background簡寫屬性可以在一條宣告中設定所有的背景值。
以下是background屬性值的格式，其中包括多個單獨的屬性：
background：


例：使用background簡寫屬性

There are lots of different kinds of fruit -there are over 500 varieties of banana alone.By the we add the countless types of apples,oranges, and other well-known fruit,we are faced with thousands of choices.

3.建立盒子陰影
通過box-shadow屬性實現。
box-shadow屬性的值
值 說明
hoffset 陰影的水平偏移量，是一個長度值，正值代表陰影向右偏移，負值代表陰影向左偏移
voffset 陰影的垂直偏移量，是一個長度值，正值代表陰影位於元素盒子下方，負值代表上方
blur (可選)指定模糊值，是一個長度值，值越大盒子的邊界越模糊，預設值為0，邊界清晰
spread (可選)指定陰影的延伸半徑，是一個長度值，正值代表陰影向盒子各個方向延伸擴大，
負值代表陰影沿相反方向縮小
color (可選)設定陰影的顏色，如果省略，瀏覽器會自行選擇一個顏色
inset (可選)將外部陰影設定為內部陰影（內嵌到盒子中）。

例：建立盒子陰影效果

There are lots of different kinds of fruit -there are over 500 varieties of banana alone.By the we add the countless types of apples,oranges, and other well-known fruit,we are faced with thousands of choices.

可以在一條box-shadow宣告中定義多個陰影，只需要用逗號分隔每條宣告即可。
例：為一個元素應用多個陰影

There are lots of different kinds of fruit -there are over 500 varieties of banana alone.By the we add the countless types of apples,oranges, and other well-known fruit,we are faced with thousands of choices.

4.應用輪廓
輪廓對於邊框來說是可選的。
短時間抓住使用者對某個元素的注意力。
邊框和輪廓最大區別：輪廓不屬於頁面，因此應用輪廓不需要調整頁面佈局。
輪廓屬性
屬性 說明 值
outline-color 設定外圍輪廓的顏色 <顏色>
outline-offset 設定輪廓距離元素邊框的偏移量 <長度>
outline-style 設定輪廓樣式 跟border-style屬性的值一樣
outline-width 設定輪廓的寬度 thin、medium、thick、<長度>
outline 在一條宣告中設定輪廓的簡寫屬性 <顏色><樣式><寬度>

例：應用輪廓

There are lots of different kinds of fruit -there are over 500 varieties of banana alone.By the we add the countless types of apples,oranges, and other well-known fruit,we are faced with thousands of choices.

There are lots of different kinds of fruit -there are over 500 varieties of banana alone.By the we add the countless types of apples,oranges, and other well-known fruit,we are faced with thousands of choices.

There are lots of different kinds of fruit -there are over 500 varieties of banana alone.By the we add the countless types of apples,oranges, and other well-known fruit,we are faced with thousands of choices.

Outline Off Outline On

使用盒模型
1.為元素應用內邊距
應用內邊距會在元素內容和邊距之間新增空白。
內邊距屬性
屬性 說明 值
padding-top 為頂邊設定內邊距 長度值或者百分數
padding-right 為右邊設定內邊距 長度值或百分數
padding-bottom 為底邊設定內邊距 長度值或百分數
padding-left 為左邊設定內邊距 長度值或百分數
padding 簡寫屬性，在一條宣告中設定所有邊的內邊距 1~4個長度值或百分數

百分數總是跟包含塊的寬度相關，高度不考慮在內。
例：為元素應用內邊距

There are lots of different kinds of fruit -there are over 500 varieties of banana alone.By the we add the countless types of apples,oranges, and other well-known fruit,we are faced with thousands of choices.

PS：
4個值：頂邊、右邊、底邊和左邊的內邊距。
省略一個值：
省略左邊的值，預設使用右邊的值。
省略底邊的值，預設使用頂邊的值。
只給一個值：四條邊的內邊距都是這個值。
例：使用padding簡寫屬性

There are lots of different kinds of fruit -there are over 500 varieties of banana alone.By the we add the countless types of apples,oranges, and other well-known fruit,we are faced with thousands of choices.

2.為元素應用外邊距
外邊距是元素邊框和頁面上圍繞在它周圍的所有東西之間的空白區域。圍繞在它周圍的東西包括其他元素和它的父元素。
外邊距屬性
屬性 說明 值
margin-top 為頂邊設定外邊距 長度值或者百分數
margin-right 為右邊設定外邊距 長度值或百分數
margin-bottom 為底邊設定外邊距 長度值或百分數
margin-left 為左邊設定外邊距 長度值或百分數
margin 簡寫屬性，在一條宣告中設定所有邊的外邊距 1~4個長度值或百分數

例：為元素新增外邊距

3.控制元素的尺寸
瀏覽器會基於頁面上內容的流設定元素的尺寸。
使用尺寸相關的屬性可以覆蓋這些行為。
尺寸屬性
屬性 說明 值
Width 設定元素的寬度和高度 auto、長度值或者百分數
Height
min-width 為元素設定最小可接受寬度和高度 auto、長度值或百分數
min-height
max-width 為元素設定最大可接受寬度和高度 auto、長度值或百分數
max-height
box-sizing 設定尺寸調整應用到元素盒子的哪一部分 content-box、padding-box、border-box、
margin-box

例：為元素設定尺寸

1.設定一定尺寸的盒子
border-sizing屬性允許你指定尺寸樣式應用到元素盒子的具體區域。

2.設定最小和最大尺寸
使用最小和最大相關屬性為瀏覽器調整元素尺寸設定一定的限制。
例：設定尺寸的最小和最大範圍

縮小瀏覽器

拉大瀏覽器

4.處理溢位內容
內容太大，已經無法完全顯示在元素的內容盒中。這時的預設處理方式是內容溢位，並繼續顯示。
例：建立一個無法完全顯示其中內容的小尺寸元素

There are lots of different kinds of fruit - there are over 500 varieties of banana alone.By the time we add the countless types of apples,oranges, and other well-known fruit,we are faced with thousands of choices.

我們可以使用overflow屬性改變這種行為。
overflow屬性
屬性 說明 值
overflow-x 設定水平方向和垂直方向的溢位方式
overflow-y
overflow 簡寫屬性 overflow
overflow-x overflow-y

溢位屬性的值
值 說明
auto 瀏覽器自行處理溢位內容。通常，如果內容被剪掉就顯示滾動條，否則就不顯示（這是相
較scroll值來說的，設定該值後，無論內容是否溢位都有滾動條）
hidden 多餘部分直接剪掉，只顯示內容盒子裡面的內容。如果使用者想看看剪掉的這部分內容，對
不起，做不到。
no-content 如果內容無法全部顯示，就直接移除。主流瀏覽器都不支援這個值
no-display 如果內容無法全部顯示，就隱藏所有內容。主流瀏覽器都不支援這個值
scroll 為了讓使用者看到所有內容，瀏覽器會新增滾動機制。通常是滾動條，不過這個值跟具體的
平臺和瀏覽器相關。即使內容沒有溢位也能看到滾動條
visible 預設值，不管是否溢位內容盒，都顯示元素內容

例：控制內容溢位

There are lots of different kinds of fruit - there are over 500 varieties of banana alone.By the time we add the countless types of apples,oranges, and other well-known fruit,we are faced with thousands of choices.

There are lots of different kinds of fruit - there are over 500 varieties of banana alone.By the time we add the countless types of apples,oranges, and other well-known fruit,we are faced with thousands of choices.

5.控制元素的可見性
visibility屬性控制元素的可見性。
visibility屬性的值
值 說明
collapse 元素不可見，且在頁面佈局中不佔據空間
hidden 元素不可見，但在頁面佈局中佔據空間
visible 預設值，元素在頁面上可見

例：使用visibility屬性

Rank	Name	Color	Size
Favorite:	Apples	Green	Medium
2nd Favorite:	Oranges	Orange	Large

Visible Collapse Hidden

6.設定元素的盒模型
display屬性提供了一種改變元素盒模型的方式，這相應會改變元素在頁面上的佈局方式。
display屬性的值
值 說明
inline 盒子顯示為文字行中的字
block 盒子顯示為段落
inline-block 盒子顯示為文字行
list-item 盒子顯示為列表項，通常具有專案符號或者其他識別符號（如索引號）
run-in 盒子型別取決於周圍的元素
compact 盒子的型別為塊或者標記盒（跟list-item型別產生的類似）
flexbox 這個值跟彈性盒佈局相關
table 這些值跟表格中的元素佈局相關
inline-table
table-row-group
table-header-group
table-footer-group
table-row
table-column-group
table-column
table-cell
table-caption
ruby 這些值跟帶ruby註釋的文字佈局相關
ruby-base
ruby-text
ruby-base-group
ruby-text-group
none 元素不可見，且在頁面佈局中不佔空間

1.認識塊級元素
將display屬性設定為block值會建立一個塊級元素。
塊級元素會在垂直方向跟周圍元素有所區別。
例：將display屬性設定為block值

There are lots of different kinds of fruit - there are over 500 varieties of banana alone.By the time we add the countless types of apples,oranges, and other well-known fruit,we are faced with thousands of choices.

One of the most interesting aspects of fruit is the variety available in each country.I live near London,in an area which is known for its apples.When travelling in Asia,I was struck by how many different kinds of banana were avaiable within a small region.

2.認識行內元素
將display屬性設定為inline值會建立一個行內元素，它在視覺上跟周圍內容的顯示沒有區別。
例：將display屬性設定為inline

There are lots of different kinds of fruit - there are over 500 varieties of banana alone.By the time we add the countless types of apples,oranges, and other well-known fruit,we are faced with thousands of choices.

One of the most interesting aspects of fruit is the variety available in each country.I live near London,in an area which is known for its apples.When travelling in Asia,I was struck by how many different kinds of banana were avaiable within a small region.

3.認識行內-塊級元素
將display屬性設定為inline-block值會建立一個其盒子混合了塊和行內特徵的元素。
盒子整體上作為行內元素顯示，這意味著垂直方向上該元素和周圍的內容並排顯示，沒有區別。
例：使用inline-block值

There are lots of different kinds of fruit - there are over 500 varieties of banana alone.By the time we add the countless types of apples,oranges, and other well-known fruit,we are faced with thousands of choices.

One of the most interesting aspects of fruit is the variety available in each country.I live near London,in an area which is known for its apples.When travelling in Asia,I was struck by how many different kinds of banana were avaiable within a small region.

4.認識插入元素
display屬性設定為run-in值會建立一個這樣的元素：其盒子型別取決於周圍元素。
（1）如果插入元素包含一個display屬性值為block的元素，那麼插入元素就是塊級元素。
（2）如果插入元素的相鄰兄弟元素是塊級元素，那麼插入元素就是兄弟元素中的第一個行內元素。
（3）其他情況下，插入元素均作為塊級元素對待。
例：相鄰兄弟元素為塊元素的插入元素

There are lots of different kinds of fruit - there are over 500 varieties of banana alone.

By the time we add the countless types of apples,oranges, and other well-known fruit,we are faced with thousands of choices.

PS：書上是兩段話連在一起的，沒有換行。
例：相鄰兄弟元素為行內元素的插入元素

There are lots of different kinds of fruit - there are over 500 varieties of banana alone.

By the time we add the countless types of apples,oranges, and other well-known fruit,we are faced with thousands of choices.

PS：課本是分行的

5.隱藏元素
將display屬性設定為none值就是告訴瀏覽器不要為元素建立任何型別的盒子，也就是說元素沒有後代元素。
這時元素在頁面佈局中不佔據任何空間。
例：將display屬性設定為none

There are lots of different kinds of fruit - there are over 500 varieties of banana alone.By the time we add the countless types of apples,oranges, and other well-known fruit,we are faced with thousands of choices.

One of the most interesting aspects of fruit is the variety available in each country.I live near London,in an area which is known for its apples.When travelling in Asia,I was struck by how many different kinds of banana were avaiable within a small region.

Block None

7.建立浮動盒
可以使用float屬性建立浮動盒，浮動盒會將元素的左邊界或者右邊界移動到包含塊或另一個浮動盒的邊界。
float屬性的值
值 說明
left 移動元素，使其左邊界挨著包含塊的左邊界，或者另一個浮動元素的右邊界
right 移動元素，使其右邊界挨著包含塊的右邊界，或者另一個浮動元素的左邊界
none 元素位置固定

例：使用float屬性

There are lots of different kinds of fruit - there are over 500 varieties of banana alone.By the time we add the countless types of apples,oranges, and other well-known fruit,we are faced with thousands of choices.

One of the most interesting aspects of fruit is the variety available in each country.I live near London,in an area which is known for its apples.

When travelling in Asia,I was struck by how many different kinds of banana were avaiable within a small region.

Left Right None

阻止浮動元素堆疊
如果設定了多個浮動元素，預設情況下。它們會一個挨著一個地堆疊在一起。使用clear屬性可以阻止出現這種情況。
clear屬性可以指定浮動元素的一個邊界或者兩個邊界不能挨著另一個浮動元素。
clear屬性的值
值 說明
left 元素的左邊界不能挨著另一個浮動元素
right 元素的右邊界不能挨著另一個浮動元素
both 元素的左右邊界都不能挨著浮動元素
none 元素的左右邊界都可以挨著浮動元素

例：使用clear屬性

There are lots of different kinds of fruit - there are over 500 varieties of banana alone.By the time we add the countless types of apples,oranges, and other well-known fruit,we are faced with thousands of choices.

One of the most interesting aspects of fruit is the variety available in each country.I live near London,in an area which is known for its apples.

When travelling in Asia,I was struck by how many different kinds of banana were avaiable within a small region.

Left Right None

建立佈局
1定位內容
控制內容最簡單的方式就是通過定位，這允許你使用瀏覽器改變元素的佈局方式。
定位屬性
屬性 說明 值
position 設定定位方法
left 為定位元素設定偏移量 <長度>
right <百分數>
top auto
bottom
z-index 設定定位元素的層疊順序 數字

1.設定定位型別
position屬性設定了元素的定位方法。
position屬性的值
值 說明
static 元素為普通佈局，預設值
relative 元素位置相對普通位置定位
absolute 元素相對於position值不為static的第一位祖先元素來定位
fixed 元素相對於瀏覽器視窗來定位

position屬性的不同值指定了元素定位所針對的不同元素。
使用top、bottom、left、right屬性設定元素的偏移量的時候，指的是相對於position屬性指定的元素的偏移量。
例：使用position屬性

There are lots of different kinds of fruit - there are over 500 varieties of banana alone.By the time we add the countless types of apples,oranges, and other well-known fruit,we are faced with thousands of choices.

One of the most interesting aspects of fruit is the variety available in each country.I live near London,in an area which is known for its apples.

相關推薦