CSS超全筆記（適合新手入門）
CSS
CSS初識
CSS(Cascading Style Sheets) 美化樣式
CSS通常稱為CSS樣式表或層疊樣式表（級聯樣式表），主要用於設定HTML頁面中的文字內容（字型、大小、對齊方式等）、圖片的外形（寬高、邊框樣式、邊距等）以及版面的佈局等外觀顯示樣式。
CSS以HTML為基礎，提供了豐富的功能，如字型、顏色、背景的控制及整體排版等，而且還可以針對不同的瀏覽器設定不同的樣式。
引入CSS樣式表（書寫位置）
CSS可以寫到那個位置？ 是不是一定寫到html檔案裡面呢？
內部樣式表
內嵌式是將CSS程式碼集中寫在HTML文件的head頭部標籤中，並且用style標籤定義，其基本語法格式如下：
<head>
<style type="text/CSS">
選擇器 {屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;}
</style>
</head>
語法中，style標籤一般位於head標籤中title標籤之後，也可以把他放在HTML文件的任何地方。
type="text/CSS" 在html5中可以省略， 寫上也比較符合規範， 所以這個地方可以寫也可以省略。
行內式（內聯樣式）
內聯樣式，又有人稱行內樣式、行間樣式、內嵌樣式。是通過標籤的style屬性來設定元素的樣式，其基本語法格式如下：
<標籤名 style="屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;"> 內容 </標籤名>
語法中style是標籤的屬性，實際上任何HTML標籤都擁有style屬性，用來設定行內式。其中屬性和值的書寫規範與CSS樣式規則相同，行內式只對其所在的標籤及巢狀在其中的子標籤起作用。
外部樣式表（外鏈式）
鏈入式是將所有的樣式放在一個或多個以.CSS為副檔名的外部樣式表文件中，通過link標籤將外部樣式表文件連結到HTML文件中，其基本語法格式如下：
<head>
<link href="CSS檔案的路徑" rel="stylesheet" />
</head>
注意： link 是個單標籤哦!!!
該語法中，link標籤需要放在的三個屬性head頭部標籤中，並且必須指定link標籤，具體如下：
href：定義所連結外部樣式表文件的URL，可以是相對路徑，也可以是絕對路徑。
type：定義所連結文件的型別，在這裡需要指定為“text/CSS”，表示連結的外部檔案為CSS樣式表。
rel：定義當前文件與被連結文件之間的關係，在這裡需要指定為“stylesheet”，表示被連結的文件是一個樣式表文件。
三種樣式表總結（位置）
CSS樣式規則
使用HTML時，需要遵從一定的規範。CSS亦如此，要想熟練地使用CSS對網頁進行修飾，首先需要了解CSS樣式規則，具體格式如下：
在上面的樣式規則中:
1.選擇器用於指定CSS樣式作用的HTML物件，花括號內是對該物件設定的具體樣式。
2.屬性和屬性值以“鍵值對”的形式出現。
3.屬性是對指定的物件設定的樣式屬性，例如字型大小、文字顏色等。
4.屬性和屬性值之間用英文“:”連線。
5.多個“鍵值對”之間用英文“;”進行區分。
可以用段落 和 表格的對齊的演示。
CSS基礎選擇器
標籤選擇器（元素選擇器）
標籤選擇器是指用HTML標籤名稱作為選擇器，按標籤名稱分類，為頁面中某一類標籤指定統一的CSS樣式。其基本語法格式如下：
標籤名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; } 或者
元素名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
標籤選擇器最大的優點是能快速為頁面中同類型的標籤統一樣式，同時這也是他的缺點，不能設計差異化樣式。
標籤選擇器 可以把某一類標籤全部選擇出來 div span
類選擇器
類選擇器使用“.”（英文點號）進行標識，後面緊跟類名，其基本語
法格式如下：
.類名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
標籤呼叫的時候用 class=“類名” 即可。
類選擇器最大的優勢是可以為元素物件定義單獨或相同的樣式。 可以選擇一個或者多個標籤
小技巧：
1.長名稱或片語可以使用中橫線來為選擇器命名。
2.不建議使用“_”下劃線來命名CSS選擇器。
輸入的時候少按一個shift鍵; 瀏覽器相容問題 (比如使用_tips的選擇器命名，在IE6是無效的) 能良好區分JavaScript變數命名(JS變數命名是用“_”)
3.不要純數字、中文等命名， 儘量使用英文字母來表示。
命名規範： 見附件（Web前端開發規範手冊.doc）
命名是我們通俗約定的，但是沒有規定必須用這些常用的命名。
多類名選擇器
我們可以給標籤指定多個類名，從而達到更多的選擇目的。
注意：
1. 樣式顯示效果跟HTML元素中的類名先後順序沒有關係,受CSS樣式書寫的上下順序有關。
2. 各個類名中間用空格隔開。
多類名選擇器在後期佈局比較複雜的情況下，還是較多使用的。
<div class="pink fontWeight font20">亞瑟</div>
<div class="font20">劉備</div>
<div class="font14 pink">安其拉</div>
<div class="font14">貂蟬</div>
id選擇器
id選擇器使用“#”進行標識，後面緊跟id名，其基本語法格式如下：
#id名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
該語法中，id名即為HTML元素的id屬性值，大多數HTML元素都可以定義id屬性，元素的id值是唯一的，只能對應於文件中某一個具體的元素。
用法基本和類選擇器相同。
id選擇器和類選擇器區別
W3C標準規定，在同一個頁面內，不允許有相同名字的id物件出現，但是允許相同名字的class。
類選擇器（class） 好比人的名字， 是可以多次重複使用的， 比如 張偉 王偉 李偉 李娜
id選擇器 好比人的身份證號碼， 全中國是唯一的， 不得重複。 只能使用一次。
id選擇器和類選擇器最大的不同在於 使用次數上。
萬用字元選擇器
萬用字元選擇器用“*”號表示，他是所有選擇器中作用範圍最廣的，能匹配頁面中所有的元素。其基本語法格式如下：
* { 屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
例如下面的程式碼，使用萬用字元選擇器定義CSS樣式，清除所有HTML標記的預設邊距。
* {
margin: 0; /* 定義外邊距*/
padding: 0; /* 定義內邊距*/
}
注意：
這個萬用字元選擇器，就像我們的電影明星中的夢中情人， 想想它就好了，但是它不會和你過日子。
CSS字型樣式屬性
font-size:字號大小
font-size屬性用於設定字號，該屬性的值可以使用相對長度單位，也可以使用絕對長度單位。其中，相對長度單位比較常用，推薦使用畫素單位px，絕對長度單位使用較少。具體如下：
font-family:字型
font-family屬性用於設定字型。網頁中常用的字型有宋體、微軟雅黑、黑體等，
例如將網頁中所有段落文字的字型設定為微軟雅黑，可以使用如下CSS樣式程式碼：
p{ font-family:"微軟雅黑";}
可以同時指定多個字型，中間以逗號隔開，表示如果瀏覽器不支援第一個字型，則會嘗試下一個，直到找到合適的字型。
常用技巧：
1. 現在網頁中普遍使用14px+。
2. 儘量使用偶數的數字字號。ie6等老式瀏覽器支援奇數會有bug。
3. 各種字型之間必須使用英文狀態下的逗號隔開。
4. 中文字型需要加英文狀態下的引號，英文字型一般不需要加引號。當需要設定英文字型時，英文字型名必須位於中文字型名之前。
5. 如果字型名中包含空格、#、$等符號，則該字型必須加英文狀態下的單引號或雙引號，例如font-family: "Times New Roman";。
6. 儘量使用系統預設字型，保證在任何使用者的瀏覽器中都能正確顯示。
CSS Unicode字型
在 CSS 中設定字型名稱，直接寫中文是可以的。但是在檔案編碼（GB2312、UTF-8 等）不匹配時會產生亂碼的錯誤。xp 系統不支援 類似微軟雅黑的中文。
方案一： 你可以使用英文來替代。 比如 font-family:"Microsoft Yahei"。
方案二： 在 CSS 直接使用 Unicode 編碼來寫字型名稱可以避免這些錯誤。使用 Unicode 寫中文字型名稱，瀏覽器是可以正確的解析的。font-family: "\5FAE\8F6F\96C5\9ED1"，表示設定字型為“微軟雅黑”。可以通過escape() 來測試屬於什麼字型
為了照顧不同電腦的字型安裝問題，我們儘量只使用宋體和微軟雅黑中文字型
font-weight:字型粗細
字型加粗除了用 b 和 strong 標籤之外，可以使用CSS 來實現，但是CSS 是沒有語義的。
font-weight屬性用於定義字型的粗細，其可用屬性值：normal、bold、bolder、lighter、100~900（100的整數倍）。
小技巧：
數字 400 等價於 normal，而 700 等價於 bold。 但是我們更喜歡用數字來表示。
font-style:字型風格
字型傾斜除了用 i 和 em 標籤之外，可以使用CSS 來實現，但是CSS 是沒有語義的。
font-style屬性用於定義字型風格，如設定斜體、傾斜或正常字型，其可用屬性值如下：
normal：預設值，瀏覽器會顯示標準的字型樣式。
italic：瀏覽器會顯示斜體的字型樣式。
oblique：瀏覽器會顯示傾斜的字型樣式。
小技巧：
平時我們很少給文字加斜體，反而喜歡給斜體標籤（em，i）改為普通模式。
font:綜合設定字型樣式 (重點)
font屬性用於對字型樣式進行綜合設定，其基本語法格式如下：
選擇器{font: font-style font-weight font-size/line-height font-family;}
使用font屬性時，必須按上面語法格式中的順序書寫，不能更換順序，各個屬性以空格隔開。
注意：其中不需要設定的屬性可以省略（取預設值），但必須保留font-size和
font-family屬性，否則font屬性將不起作用。
CSS外觀屬性
color:文字顏色
color屬性用於定義文字的顏色，其取值方式有如下3種：
1.預定義的顏色值，如red，green，blue等。
2.十六進位制，如#FF0000，#FF6600，#29D794等。實際工作中，十六進位制是最常用的定義顏色的方式。
3.RGB程式碼，如紅色可以表示為rgb(255,0,0)或rgb(100%,0%,0%)。
需要注意的是，如果使用RGB程式碼的百分比顏色值，取值為0時也不能省略百分號，必須寫為0%。
line-height:行間距
ine-height屬性用於設定行間距，就是行與行之間的距離，即字元的垂直間距，一般稱為行高。line-height常用的屬性值單位有三種，分別為畫素px，相對值em和百分比%，實際工作中使用最多的是畫素px
一般情況下，行距比字號大7.8畫素左右就可以了。
text-align:水平對齊方式
text-align屬性用於設定文字內容的水平對齊，相當於html中的align對齊屬性。其可用屬性值如下：
left：左對齊（預設值）
right：右對齊
center：居中對齊
text-indent:首行縮排
text-indent屬性用於設定首行文字的縮排，其屬性值可為不同單位的數值、em字元寬度的倍數、或相對於瀏覽器視窗寬度的百分比%，允許使用負值, 建議使用em作為設定單位。
1em 就是一個字的寬度 如果是漢字的段落， 1em 就是一個漢字的寬度
text-decoration 文字的裝飾
text-decoration 通常我們用於給連結修改裝飾效果
開發者工具（chrome）
此工具是我們的必備工具，以後程式碼出了問題，我們首先第一反應就是：
“按F12”或者是 “shift+ctrl+i” 開啟 開發者工具。
選單： 右擊網頁空白出---檢視
小技巧：
1、ctrl+滾輪 可以 放大開發者工具程式碼大小。
2、左邊是HTML元素結構 右邊是CSS樣式。
3、右邊CSS樣式可以改動數值和顏色檢視更改後效果。
記憶技巧：
交集選擇器 是 並且的意思。 即...又...的意思
比如： p.one 選擇的是： 類名為 .one 的 段落標籤。
用的相對來說比較少，不太建議使用。
並集選擇器
並集選擇器（CSS選擇器分組）是各個選擇器通過<strong style="color:#f00">逗號</strong>連線而成的，任何形式的選擇器（包括標籤選擇器、class類選擇器id選擇器等），都可以作為並集選擇器的一部分。如果某些選擇器定義的樣式完全相同，或部分相同，就可以利用並集選擇器為它們定義相同的CSS樣式。
CSS複合選擇器
複合選擇器是由兩個或多個基礎選擇器，通過不同的方式組合而成的,目的是為了可以選擇更準確更精細的目標元素標籤。
交集選擇器
交集選擇器由兩個選擇器構成，其中第一個為標籤選擇器，第二個為class選擇器，兩個選擇器之間不能有空格，如h3.special。
記憶技巧：
並集選擇器 和 的意思， 就是說，只要逗號隔開的，所有選擇器都會執行後面樣式。
比如 .one, p , #test {color: #F00;} 表示 .one 和 p 和 #test 這三個選擇器都會執行顏色為紅色。 通常用於集體宣告。
後代選擇器
後代選擇器又稱為包含選擇器，用來選擇元素或元素組的後代，其寫法就是把外層標籤寫在前面，內層標籤寫在後面，中間用空格分隔。當標籤發生巢狀時，內層標籤就成為外層標籤的後代。
子元素選擇器
子元素選擇器只能選擇作為某元素子元素的元素。其寫法就是把父級標籤寫在前面，子級標籤寫在後面，中間跟一個 進行連線，注意，符號左右兩側各保留一個空格。
偽類選擇器
偽類選擇器用於向某些選擇器新增特殊的效果。比如給連結新增特殊效果， 比如可以選擇 第1個，第n個元素。
為了和我們剛才學的類選擇器相區別， 類選擇器是一個點 比如 .demo {} 而我們的偽類 用 2個點 就是 冒號 比如 :link{}
連結偽類選擇器
:link /* 未訪問的連結 */
:visited /* 已訪問的連結 */
:hover /* 滑鼠移動到連結上 */
:active /* 選定的連結 */
注意寫的時候，他們的順序儘量不要顛倒 按照 lvha 的順序。 love hate 愛上了討厭 記憶法 或者 lv 包包 非常 hao
a { /* a是標籤選擇器 所有的連結 */
font-weight: 700;
font-size: 16px;
color: gray;
}
a:hover { /* :hover 是連結偽類選擇器 滑鼠經過 */
color: red; /* 滑鼠經過的時候，由原來的 灰色 變成了紅色 */
}
CSS註釋
CSS規則是使用 /* 需要註釋的內容 */ 進行註釋的，即在需要註釋的內容前使用 “/*” 標記開始註釋，在內容的結尾使用 “*/”結束。
例如：
p {
font-size: 14px; /* 所有的字型是14畫素大小*/}
sublime快捷方式
sublime可以快速提高我們程式碼的書寫方式
生成標籤 直接輸入標籤名 按tab鍵即可 比如 div 然後tab 鍵， 就可以生成 <div></div>
如果想要生成多個相同標籤 加上 * 就可以了 比如 div*3 就可以快速生成3個div
如果有父子級關係的標籤，可以用 > 比如 ul > li就可以了
如果有兄弟關係的標籤，用 + 就可以了 比如 div+p
如果生成帶有類名或者id名字的， 直接寫 .demo 或者 #two tab 鍵就可以了
標籤顯示模式（display）
塊級元素(block-level)
每個塊元素通常都會獨自佔據一整行或多整行，可以對其設定寬度、高度、對齊等屬性，常用於網頁佈局和網頁結構的搭建。
常見的塊元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>標籤是最典型的塊元素。
塊級元素的特點：
（1）總是從新行開始
（2）高度，行高、外邊距以及內邊距都可以控制。
（3）寬度預設是容器的100%
（4）可以容納內聯元素和其他塊元素。
行內元素(inline-level)
行內元素（內聯元素）不佔有獨立的區域，僅僅靠自身的字型大小和影象尺寸來支撐結構，一般不可以設定寬度、高度、對齊等屬性，常用於控制頁面中文字的樣式。
常見的行內元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>標籤最典型的行內元素。
行內元素的特點：
（1）和相鄰行內元素在一行上。
（2）高、寬無效，但水平方向的padding和margin可以設定，垂直方向的無效。
（3）預設寬度就是它本身內容的寬度。
（4）行內元素只能容納文字或則其他行內元素。（a特殊）
注意：
1、只有 文字才 能組成段落 因此 p 裡面不能放塊級元素，同理還有這些標籤h1,h2,h3,h4,h5,h6,dt，他們都是文字類塊級標籤，裡面不能放其他塊級元素。
2、連結裡面不能再放連結
塊級元素和行內元素區別
塊級元素的特點：
（1）總是從新行開始
（2）高度，行高、外邊距以及內邊距都可以控制。
（3）寬度預設是容器的100%
（4）可以容納內聯元素和其他塊元素。
行內元素的特點：
（1）和相鄰行內元素在一行上。
（2）高、寬無效，但水平方向的padding和margin可以設定，垂直方向的無效。
（3）預設寬度就是它本身內容的寬度。
（4）行內元素只能容納文字或則其他行內元素。
標籤顯示模式轉換 display
塊轉行內：display:inline;
行內轉塊：display:block;
塊、行內元素轉換為行內塊： display: inline-block;
此階段，我們只需關心這三個，其他的是我們後面的工作。
CSS書寫規範
開始就形成良好的書寫規範，是你專業化的開始。
空格規範
【強制】 選擇器 與 { 之間必須包含空格。
示例： .selector { }
【強制】 屬性名 與之後的 : 之間不允許包含空格， : 與 屬性值 之間必須包含空格。
示例：
font-size: 12px;
選擇器規範
【強制】 當一個 rule 包含多個 selector 時，每個選擇器宣告必須獨佔一行。
示例：
/* good */
.post,
.page,
.comment {
line-height: 1.5;
}
/* bad */
.post, .page, .comment {
line-height: 1.5;
}
【建議】 選擇器的巢狀層級應不大於 3 級，位置靠後的限定條件應儘可能精確。
示例：
/* good */
#username input {}
.comment .avatar {}
/* bad */
.page .header .login #username input {}
.comment div * {}
屬性規範
【強制】 屬性定義必須另起一行。
示例：
/* good */
.selector {
margin: 0;
padding: 0;
}
/* bad */
.selector { margin: 0; padding: 0; }
【強制】 屬性定義後必須以分號結尾。
示例：
/* good */
.selector {
margin: 0;
}
/* bad */
.selector {
margin: 0
}
CSS 三大特性
層疊 繼承 優先順序 是我們學習CSS 必須掌握的三個特性。
CSS層疊性
所謂層疊性是指多種CSS樣式的疊加。
是瀏覽器處理衝突的一個能力,如果一個屬性通過兩個相同選擇器設定到同一個元素上，那麼這個時候一個屬性就會將另一個屬性層疊掉
比如先給某個標籤指定了內部文字顏色為紅色，接著又指定了顏色為藍色，此時出現一個標籤指定了相同樣式不同值的情況，這就是樣式衝突。
一般情況下，如果出現樣式衝突，則會按照CSS書寫的順序，以最後的樣式為準。
1、樣式衝突，遵循的原則是就近原則。 那個樣式離著結構近，就執行那個樣式。
2、樣式不衝突，不會層疊
CSS最後的執行口訣： 長江後浪推前浪，前浪死在沙灘上。
行內塊元素（inline-block）
在行內元素中有幾個特殊的標籤——<img />、<input />、<td>，可以對它們設定寬高和對齊屬性，有些資料可能會稱它們為行內塊元素。
行內塊元素的特點：
（1）和相鄰行內元素（行內塊）在一行上,但是之間會有空白縫隙。
（2）預設寬度就是它本身內容的寬度。
（3）高度，行高、外邊距以及內邊距都可以控制。
CSS繼承性
所謂繼承性是指書寫CSS樣式表時，子標籤會繼承父標籤的某些樣式，如文字顏色和字號。想要設定一個可繼承的屬性，只需將它應用於父元素即可。
簡單的理解就是： 子承父業。
CSS最後的執行口訣： 龍生龍，鳳生鳳，老鼠生的孩子會打洞。
注意：
恰當地使用繼承可以簡化程式碼，降低CSS樣式的複雜性。子元素可以繼承父元素的樣式（text-，font-，line-這些元素開頭的都可以繼承，以及color屬性）
CSS優先順序
定義CSS樣式時，經常出現兩個或更多規則應用在同一元素上，這時就會出現優先順序的問題。
在考慮權重時，初學者還需要注意一些特殊的情況，具體如下：
繼承樣式的權重為0。即在巢狀結構中，不管父元素樣式的權重多大，被子元素繼承時，他的權重都為0，也就是說子元素定義的樣式會覆蓋繼承來的樣式。
行內樣式優先。應用style屬性的元素，其行內樣式的權重非常高，可以理解為遠大於100。總之，他擁有比上面提高的選擇器都大的優先順序。
權重相同時，CSS遵循就近原則。也就是說靠近元素的樣式具有最大的優先順序，或者說排在最後的樣式優先順序最大。
CSS定義了一個!important命令，該命令被賦予最大的優先順序。也就是說不管權重如何以及樣式位置的遠近，!important都具有最大優先順序。
CSS特殊性（Specificity）
關於CSS權重，我們需要一套計算公式來去計算，這個就是 CSS Specificity，我們稱為CSS 特性或稱非凡性，它是一個衡量CSS值優先順序的一個標準 具體規範入如下：
specificity用一個四位的數 字串(CSS2是三位)來表示，更像四個級別，值從左到右，左面的最大，一級大於一級，數位之間沒有進位制，級別之間不可超越。
權重是可以疊加的
比如的例子：
注意：
1.數位之間沒有進位制 比如說： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不會存在10個div能趕上一個類選擇器的情況。
繼承的 權重是 0
總結優先順序：
1、使用了 !important宣告的規則。
2、內嵌在 HTML 元素的 style屬性裡面的宣告。
3、使用了 ID 選擇器的規則。
4、使用了類選擇器、屬性選擇器、偽元素和偽類選擇器的規則。
5、使用了元素選擇器的規則。
6、只包含一個通用選擇器的規則。
7、同一類選擇器則遵循就近原則。
總結：權重是優先順序的演算法，層疊是優先順序的表現
CSS 背景(background)
CSS 可以新增背景顏色和背景圖片，以及來進行圖片設定。
背景圖片(image)
語法：
background-image : none | url (url)
引數：
none : 無背景圖（預設的）url : 使用絕對或相對地址指定背景影象
background-image 屬性允許指定一個圖片展示在背景中（只有CSS3才可以多背景）可以和 background-color 連用。 如果圖片不重複地話，圖片覆蓋不到地地方都會被背景色填充。 如果有背景圖片平鋪，則會覆蓋背景顏色。
小技巧： 我們提倡 背景圖片後面的地址，url不要加引號。
背景平鋪（repeat）
語法：
background-repeat : repeat | no-repeat | repeat-x | repeat-y
引數：
repeat : 背景影象在縱向和橫向上平鋪（預設的）
no-repeat : 背景影象不平鋪
repeat-x : 背景影象在橫向上平鋪
repeat-y : 背景影象在縱向平鋪
設定背景圖片時，預設把圖片在水平和垂直方向平鋪以鋪滿整個元素。
repeat-x : 背景影象在橫向上平鋪
repeat-y : 背景影象在縱向平鋪
背景位置(position)
語法：
background-position : length || length
background-position : position || position
引數：
length : 百分數 | 由浮點數字和單位識別符號組成的長度值。請參閱長度單位 position : top | center | bottom | left | center | right
說明：
設定或檢索物件的背景影象位置。必須先指定background-image屬性。預設值為：(0% 0%)。如果只指定了一個值，該值將用於橫座標。縱座標將預設為50%。第二個值將用於縱座標。
注意：
1、position 後面是x座標和y座標。 可以使用方位名詞或者 精確單位。
2、如果和精確單位和方位名字混合使用，則必須是x座標在前，y座標後面。比如 background-position: 15px top; 則 15px 一定是 x座標 top是 y座標。
3、實際工作用的最多的，就是背景圖片居中對齊了。
背景附著
語法：
background-attachment : scroll | fixed
引數：
scroll : 背景影象是隨物件內容滾動fixed : 背景影象固定
說明：
設定或檢索背景影象是隨物件內容滾動還是固定的。
背景簡寫
background屬性的值的書寫順序官方並沒有強制標準的。為了可讀性，建議大家如下寫：
background:背景顏色 背景圖片地址 背景平鋪 背景滾動 背景位置
background: transparent url(image.jpg) repeat-y scroll 50% 0 ;
背景透明(CSS3)
CSS3支援背景半透明的寫法語法格式是:
background: rgba(0,0,0,0.3);
最後一個引數是alpha 透明度 取值範圍 0~1之間
注意： 背景半透明是指盒子背景半透明， 盒子裡面的內容不收影響。
導航欄案例
使用技巧：在一行內的盒子內，我們設定行高等於盒子的高度，就可以使文字垂直居中。
<head>
<meta charset="utf-8">
<style>
body {
}
a {
width: 200px;
height: 50px;
/* background-color: orange; */
display: inline-block; /* 把a 行內元素轉換為行內塊元素 */
text-align: center; /* 文字水平居中 */
line-height: 50px; /* 我們設定行高等於盒子的高度，就可以使文字垂直居中 */
color: #fff;
font-size: 22px;
text-decoration: none; /* 取消下劃線 文字裝飾 */
}
a:hover { /* 滑鼠經過 給我們的連結新增背景圖片*/
background: url(images/h.png) no-repeat;
}
</style>
</head>
<body>
<a href="#">專區說明</a>
<a href="#">申請資格</a>
<a href="#">兌換獎勵</a>
<a href="#">下載遊戲</a>
</body>
盒子模型（CSS重點）
其實，CSS就三個大模組： 盒子模型 、 浮動 、 定位，其餘的都是細節。要求這三部分，無論如何也要學的非常精通。
所謂盒子模型就是把HTML頁面中的元素看作是一個矩形的盒子，也就是一個盛裝內容的容器。每個矩形都由元素的內容、內邊距（padding）、邊框（border）和外邊距（margin）組成。
看透網頁佈局的本質
網頁佈局中，我們是如何把裡面的文字，圖片，按照美工給我們的效果圖排列的整齊有序呢？
盒子邊框（border）
邊框就是那層皮。 橘子皮。。柚子皮。。橙子皮。。。
語法：
border : border-width || border-style || border-color
邊框屬性—設定邊框樣式（border-style）
邊框樣式用於定義頁面中邊框的風格，常用屬性值如下：
none：沒有邊框即忽略所有邊框的寬度（預設值）
solid：邊框為單實線(最為常用的)
dashed：邊框為虛線
dotted：邊框為點線
double：邊框為雙實線
盒子邊框寫法總結表
表格的細線邊框
以前學過的html表格邊框很粗，這裡只需要CSS一句話就可以美觀起來。 讓我們真的相信，CSS就是我們的白馬王子（白雪公主）。
table{ border-collapse:collapse; } collapse 單詞是合併的意思
border-collapse:collapse; 表示邊框合併在一起。
圓角邊框(CSS3)
從此以後，我們的世界不只有矩形。radius 半徑（距離）
語法格式：
border-radius: 左上角 右上角 右下角 左下角;
內邊距（padding）
padding屬性用於設定內邊距。 是指 邊框與內容之間的距離。
padding-top:上內邊距
padding-right:右內邊距
padding-bottom:下內邊距
padding-left:左內邊距
注意： 後面跟幾個數值表示的意思是不一樣的。
外邊距（margin）
margin屬性用於設定外邊距。 設定外邊距會在元素之間建立“空白”， 這段空白通常不能放置其他內容。
margin-top:上外邊距
margin-right:右外邊距
margin-bottom:下外邊距
margin-left:上外邊距
margin:上外邊距 右外邊距 下外邊距 左外邊
取值順序跟內邊距相同。
外邊距實現盒子居中
可以讓一個盒子實現水平居中，需要滿足一下兩個條件：
必須是塊級元素。
盒子必須指定了寬度（width）
然後就給左右的外邊距都設定為auto，就可使塊級元素水平居中。
實際工作中常用這種方式進行網頁佈局，示例程式碼如下：
.header{ width:960px; margin:0 auto;}
文字盒子居中圖片和背景區別
1、文字水平居中是 text-align: center
2、盒子水平居中 左右margin 改為 auto
text-align: center; /* 文字居中水平 */
margin: 10px auto; /* 盒子水平居中 左右margin 改為 auto 就闊以了 */
插入圖片 我們用的最多 比如產品展示類
背景圖片我們一般用於小圖示背景 或者 超大背景圖片
section img {
width: 200px;/* 插入圖片更改大小 width 和 height */
height: 210px;
margin-top: 30px; /* 插入圖片更改位置 可以用margin 或padding 盒模型 */
margin-left: 50px; /* 插入當圖片也是一個盒子 */
}
aside {
width: 400px;
height: 400px;
border: 1px solid purple;
background: #fff url(images/sun.jpg) no-repeat;
background-size: 200px 210px; /* 背景圖片更改大小隻能用 background-size */
background-position: 30px 50px; /* 背景圖片更該位置 我用 background-position */
}
清除元素的預設內外邊距
為了更方便地控制網頁中的元素，製作網頁時，可使用如下程式碼清除元素的預設內外邊距：
* {
padding:0; /* 清除內邊距 */
margin:0; /* 清除外邊距 */
}
注意： 行內元素是隻有左右外邊距的，是沒有上下外邊距的。 內邊距，在ie6等低版本瀏覽器也會有問題。
我們儘量不要給行內元素指定上下的內外邊距就好了。
外邊距合併
使用margin定義塊元素的垂直外邊距時，可能會出現外邊距的合併。
相鄰塊元素垂直外邊距的合併
當上下相鄰的兩個塊元素相遇時，如果上面的元素有下外邊距margin-bottom，下面的元素有上外邊距margin-top，則他們之間的垂直間距不是margin-bottom與margin-top之和，而是兩者中的較大者。這種現象被稱為相鄰塊元素垂直外邊距的合併（也稱外邊距塌陷）。
巢狀塊元素垂直外邊距的合併
對於兩個巢狀關係的塊元素，如果父元素沒有上內邊距及邊框，則父元素的上外邊距會與子元素的上外邊距發生合併，合併後的外邊距為兩者中的較大者，即使父元素的上外邊距為0，也會發生合併。
解決方案：
1、可以為父元素定義1畫素的上邊框或上內邊距。
2、可以為父元素新增overflow:hidden。
content寬度和高度
使用寬度屬性width和高度屬性height可以對盒子的大小進行控制。
width和height的屬性值可以為不同單位的數值或相對於父元素的百分比%，實際工作中最常用的是畫素值。
大多數瀏覽器，如Firefox、IE6及以上版本都採用了W3C規範，符合CSS規範的盒子模型的總寬度和總高度的計算原則是：
/*外盒尺寸計算（元素空間尺寸）*/
Element空間高度 = content height + padding + border + margin
Element 空間寬度 = content width + padding + border + margin
/*內盒尺寸計算（元素實際大小）*/
Element Height = content height + padding + border （Height為內容高度）
Element Width = content width + padding + border （Width為內容寬度）
注意：
1、寬度屬性width和高度屬性height僅適用於塊級元素，對行內元素無效（ img 標籤和 input除外）。
2、計算盒子模型的總高度時，還應考慮上下兩個盒子垂直外邊距合併的情況。
3、如果一個盒子沒有給定寬度/高度或者繼承父親的寬度/高度，則padding 不會影響本盒子大小。
盒子模型佈局穩定性
開始學習盒子模型，同學們最大的困惑就是， 分不清內外邊距的使用，什麼情況下使用內邊距，什麼情況下使用外邊距？
答案是： 其實他們大部分情況下是可以混用的。 就是說，你用內邊距也可以，用外邊距也可以。 你覺得哪個方便，就用哪個。
但是，總有一個最好用的吧，我們根據穩定性來分，建議如下：
按照 優先使用 寬度 （width） 其次 使用內邊距（padding） 再次 外邊距（margin）。
width > padding > margin
原因：
margin 會有外邊距合併 還有 ie6下面margin 加倍的bug（討厭）所以最後使用。
padding 會影響盒子大小， 需要進行加減計算（麻煩） 其次使用。
width 沒有問題（嗨皮）我們經常使用寬度剩餘法 高度剩餘法來做。
盒子陰影
語法格式：
box-shadow:水平陰影 垂直陰影 模糊距離 陰影尺寸 陰影顏色 內/外陰影；
1、前兩個屬性是必須寫的。其餘的可以省略。
2、外陰影 (outset) 但是不能寫 預設 想要內陰影 inset
div {
width: 200px;
height: 200px;
border: 10px solid red;
/* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4); */
/* box-shadow:水平位置 垂直位置 模糊距離 陰影尺寸（影子大小） 陰影顏色 內/外陰影； */
box-shadow: 0 15px 30px rgba(0, 0, 0, .4);
}
浮動(float)
普通流(normal flow)
這個單詞很多人翻譯為 文件流 ， 字面翻譯 普通流 或者標準流都可以。
前面我們說過，網頁佈局的核心，就是用CSS來擺放盒子位置。如何把盒子擺放到合適的位置？
CSS的定位機制有3種：普通流（標準流）、浮動和定位。
html語言當中另外一個相當重要的概念----------標準流！或者普通流。普通流實際上就是一個網頁內標籤元素正常從上到下，從左到右排列順序的意思，比如塊級元素會獨佔一行，行內元素會按順序依次前後排列；按照這種大前提的佈局排列之下絕對不會出現例外的情況叫做普通流佈局。
浮動(float)
浮動最早是用來控制圖片，以便達到其他元素（特別是文字）實現“環繞”圖片的效果。
後來，我們發現浮動有個很有意思的事情：就是讓任何盒子可以一行排列,因此我們就慢慢的偏離主題，用浮動的特性來佈局了。（CSS3已經我們真正意義上的網頁佈局，具體CSS3我們會詳細解釋）
什麼是浮動？
元素的浮動是指設定了浮動屬性的元素會脫離標準普通流的控制，移動到其父元素中指定位置的過程。
在CSS中，通過float屬性來定義浮動，其基本語法格式如下：
元素的浮動是指設定了浮動屬性的元素會脫離標準普通流的控制，移動到其父元素中指定位置的過程。
在CSS中，通過float屬性來定義浮動，其基本語法格式如下：
浮動詳細內幕特性
浮動脫離標準流，不佔位置，會影響標準流。浮動只有左右浮動。
浮動首先建立包含塊的概念（包裹）。就是說， 浮動的元素總是找理它最近的父級元素對齊。但是不會超出內邊距的範圍。
浮動的元素排列位置，跟上一個元素（塊級）有關係。如果上一個元素有浮動，則A元素頂部會和上一個元素的頂部對齊；如果上一個元素是標準流，則A元素的頂部會和上一個元素的底部對齊。
由2可以推斷出，一個父盒子裡面的子盒子，如果其中一個子級有浮動的，則其他子級都需要浮動。這樣才能一行對齊顯示。
元素新增浮動後，元素會具有行內塊元素的特性。元素的大小完全取決於定義的大小或者預設的內容多少浮動根據元素書寫的位置來顯示相應的浮動。
總結： 浮動 --->
浮動的目的就是為了讓多個塊級元素同一行上顯示。
float 浮 漏 特
浮： 加了浮動的元素盒子是浮起來的，漂浮在其他的標準流盒子上面。漏： 加了浮動的盒子，不佔位置的，它浮起來了，它原來的位置漏 給了標準流的盒子。特： 特別注意，首先浮動的盒子需要和標準流的父級搭配使用， 其次 特別的注意浮動可以使元素顯示模式體現為行內塊特性。
版心和佈局流程
閱讀報紙時容易發現，雖然報紙中的內容很多，但是經過合理地排版，版面依然清晰、易讀。同樣，在製作網頁時，要想使頁面結構清晰、有條理，也需要對網頁進行“排版”。
“版心”(可視區) 是指網頁中主體內容所在的區域。一般在瀏覽器視窗中水平居中顯示，常見的寬度值為960px、980px、1000px、1200px等。
佈局流程
為了提高網頁製作的效率，佈局時通常需要遵守一定的佈局流程，具體如下：
1、確定頁面的版心（可視區）。
2、分析頁面中的行模組，以及每個行模組中的列模組。
3、製作HTML結構 。
4、CSS初始化，然後開始運用盒子模型的原理，通過DIV+CSS佈局來控制網頁的各個模組。
清除浮動
準確地說，並不是清除浮動，而是清除浮動後造成的影響
清除浮動本質
清除浮動主要為了解決父級元素因為子級浮動引起內部高度為0 的問題。
清除浮動的方法
其實本質叫做閉合浮動更好一些, 記住，清除浮動就是把浮動的盒子圈到裡面，讓父盒子閉合出口和入口不讓他們出來影響其他元素。
在CSS中，clear屬性用於清除浮動，其基本語法格式如下：
選擇器{clear:屬性值;}
額外標籤法
是