css的三種表現形式：

1、行內樣式（內嵌樣式）：結構的內部，即寫在標籤內的樣式；寫在標籤的開始部分內部，style屬性當中； <標記 style="樣式的屬性名1：樣式的屬性值1；屬性名2：屬性值2；......"></標記> 2、內部樣式（內聯樣式）：寫在HTML頁面內部，存放於head標記當中，樣式寫在style標記內；    注意：style標記不要寫在title標記上方； <style> 選擇器 { 屬性名：屬性值； 屬性名：屬性值； ...... }    </style> 3、外部樣式（外聯樣式）：寫在css檔案內； <link type="text/css" rel="stylesheet" href="css/main.css" />

color:設定文字顏色； 屬性值：1、表示顏色的英文單詞，例如：red、blue、green、pink、purple、cyan等； 2、十六進位制表示法：#ff0000； 0、1、2...9、a、b、c...f            #  ff    00    00 紅色  綠色  藍色 0表示顏色的最低值，f表示顏色的最大值； 3、rgb表示法：color：rgb(0,0,0)；取值0-255； 4、rgba表示法：color:rgba(0,0,0,0)；前三個值的取值0-255，第四個值的取值0-1； a--alpha

font-family：設定字型格式；可以設定多個字型格式，之間用“，”隔開，字型格式用“”包含；

font-size：設定字型大小，單位畫素（px）；

font-style：設定字型樣式 normal--正常的，沒有任何樣式； italic--斜體字；只有字型本身有斜體才能傾斜，否則不能傾斜； oblique--傾斜的；可以強行傾斜字型；

font-weight：設定字型字重，即字型的粗細； 100-900取整百，700相當於粗體（bold），900相當於更粗（bolder）； bold--粗體 bolder--比粗體更粗； lighter--細體；

選擇器：選擇對應的標籤，將樣式給到對應的標籤；

2、通用選擇器（萬用字元）：給所有的標籤新增樣式；    程式碼： * { 屬性名：屬性值； } 注意：通用選擇器是先遍歷頁面當中所有的標籤，然後再給這些標籤新增樣式，所以這個選擇器的效能非常低；一般只會在測試的時候使用，用於css的初始化，但是在專案當中不要使用；

3、類選擇器：給同一類（同一個群體）標籤新增樣式；要先給同一類標籤取一個名字；    屬性--class給標籤命名類名；    程式碼： .class名（類名）{ 屬性名：屬性值； } 注意：一個類名可以給多個標籤，一個標籤可以有多個類名，多個類名之間用“空格”隔開；

4、id選擇器：給某一個標籤新增樣式；要先取一個id名    屬性--id；    程式碼： #ID名 { 屬性名：屬性值； } 注意：一個ID名只能給一個標籤，一個標籤只能有一個ID名；（從一而終）

5、後代選擇器：選擇的是某一個元素的後代元素；    程式碼：          祖先選擇器 後代名 { 屬性名：屬性值； } 注意：中間是用“空格”連線，表示“裡面的”意思；

選擇器原理：是由內向外查詢，先查詢所有的p，然後判斷這個p是否由滿足要求的父節點father，不滿足就繼續向上一級查詢，沒有找到就不滿要求，找到了才給這個p新增樣式；

6、子選擇器：選擇某個元素的直接後代；    程式碼：          父選擇器>子級{ 屬性名：屬性值； }

7、相鄰兄弟選擇器：選擇緊挨著該元素的後面的一個元素；    程式碼：          元素名+兄弟名{ 屬性名：屬性值； }

8、通用兄弟選擇器：選擇的是該元素後面的所有的某一種元素；    程式碼：          元素名~兄弟名{ 屬性名：屬性值； }

9、並集選擇器：將兩個不相干的元素同時新增相同屬性；    程式碼：          元素1，元素2，元素3......{ 屬性名：屬性值； }

10、交集選擇器：當標籤和類名（ID名）都衝突的時候，使用交集選擇器；     程式碼：          元素名.類名（#ID名）{ 屬性名：屬性值； }

css三大特性： 1、繼承：父級的樣式會被子級繼承；!important不會被繼承；

2、層疊：當樣式發生衝突的時候，樣式會產生覆蓋（層疊）；

3、優先順序：!important(最高階)>行內樣式>id>類>標籤>*>繼承；            同級樣式遵循“就近原則”；就近指定是誰離內容進誰的優先順序就高；
權重：標籤選擇器--1 類選擇武器--10          id選擇器--100 行內樣式--1000          !important--1/0(無窮大) 數標籤：先數id，比較完id再數類，比較完類再數標籤；

盒子模型： 1、內容--寬度：width；單位px、百分比（繼承）、em、rem；          高度：height；單位px、百分比（繼承）、em、rem；          背景--背景色：background-color；顏色單詞、十六進位制表示法、rgb、rgba；                背景圖片：background-image:url(路徑)；                背景圖片重複：background-repeat；no-repeat(不重複)、repeat-x（水平重複）、repeat-y（垂直重複）、repeat（水平垂直重複、預設）；                背景定位：background-position：left、center、right、top、center、bottom、具體的數值（單位px）          背景連寫：background：背景顏色 背景圖片 背景圖片重複 背景定位；可以只單寫某一個屬性；

2、填充：上填充--padding-top 下填充--padding-bottom 左填充--padding-left 右填充--padding-right 填充連寫--padding：1個值--》上、右、下、左全部是這個值； 2個值--》第一個值表示上下，第二個值表示左右； 3個值--》第一個值表示上，第二個值表示左右，第三個值表示下； 4個值--》依次為上、右、下、左；（順時針方向）          注意：padding會改變盒子的大小，要想在新增padding的同時保持盒子的大小不變，應將padding的值從盒子的大小中減去；
3、邊框：邊框粗細--border-width 邊框顏色--border-color 邊框樣式--border-style：solid（實線）、dashed（虛線）、dotted（點線）          邊框連寫--border：width style color; 可以單獨只寫某一邊的邊框--border-top、border-bottom、border-left、border-right 注意：邊框的對齊方式為向外對齊，所以邊框會改變盒子大小；

4、外邊距：上邊距--margin-top 下邊距--margin-bottom 左邊距--margin-left 右邊距--margin-right 外邊距連寫--margin：1個值 2個值 3個值 4個值（參照padding）；

預設文件流佈局下，父子上邊界共用問題？ 解決：1、使用padding； 2、給父級使用border； 3、給父級新增屬性--overflow：hidden； 4、浮動； 5、定位；

外邊距塌陷：在垂直方向上上下邊距會合並，取最大值；

盒子水平居中：margin：0 auto；

樣式的繼承：width、color、font-、text-、line-height都可以被繼承；

<ins></ins>下劃線標記

<del></del>刪除線標記

文字修飾：text-decoration--underline；下劃線 line-through；刪除線 none；無/沒有修飾；

文字對齊：text-align--left；左對齊 center；居中對齊 right；右對齊

文字縮排：text-indent；指的是文字的首行縮排；                        單位px、em；

行高：line-height--用於設定一行文字的高度，常用於設定一行文字在容器當中垂直居中；                    單位：1、px； 2、百分比；基於文字大小的百分比，“%”前必須是整十，如：150%、200%                          3、em；相對單位，同樣是基於文字大小；如：1.5em、2em； 4、沒有單位；a--沒有繼承的情況下，相當於em； b--在有繼承的情況下： i、父級的行高有單位em，則會先計算好行高，然後將行高的數值直接繼承給子級，子級本身不會再計算行高； ii、行高沒有單位，則父級會直接將行高繼承給子級，然後子級根據行高值自行計算行高；

font連寫--font：樣式/粗細 大小 格式；大小和格式必須都有，缺少任何一個都不行；

元素的顯示方式： 1、塊級--block；獨佔一行，支援寬高； 2、行內--inline；和其他行內元素在一行顯示，不支援寬高； 3、行內塊級--inline-block，既有行內元素特性，又有塊級元素的特性；同樣在一行中顯示，並且支援寬高； display:block/inline/inline-block； 以上為預設文件流（標準文件流）下的情況；

在有連結的情況下，a標記無法繼承父級的color樣式；

偽類選擇器： a:link--連結的原本的樣式（沒有訪問過）；一旦訪問過後就失效； a:hover--滑鼠移入時的樣式； a:active--滑鼠按下時的樣式（滑鼠沒有鬆開）； a:viseted--連結訪問過後的樣式； L--H--V--A

浮動：讓預設（標準）文件流下的元素漂浮起來水平排列； float--left左浮動； right右浮動； none不浮動； 浮動排列的順序不會改變，預設時誰在第一個，浮動就會排在第一個；

浮動的影響： 1、行內元素浮動之後可以支援寬高； 2、文字會給浮動的元素讓位；可以製作文字繞排的效果； 3、在父級沒有給高度的情況下，子級浮動後父級會沒有高度；

清除浮動： 1、在父級內容的最後新增一個空的div，新增clear屬性； clear--left清除左浮動； right清除右浮動； both清除所有（左/右）浮動； clear是清除上一個元素帶來的影響；    不推薦使用，因為會在頁面上新增太多的無用標籤，讓頁面的佈局變得更復雜；

2、給父級設定overflow：hidden；    會觸發bfc（block formatting context）塊級格式化上下文；    不推薦使用，因為這個屬性和定位一起使用時會產生問題；

3、使用偽元素after    .clearfix:after {    content:"";/*內容為空*/ height:0;/*高度為0*/ line-height:0;/*行高為0*/ display:block;/*塊級元素*/ visibility:hide;/*隱藏*/ clear:both;/*清除浮動*/    }    .clearfix { zoom:1;/*IE678*/    }

4、使用雙偽元素after和before    .clearfix:afer,.clearfix:before { content:""; display:table; clear:both;    }    .clearfix { zoom:1;    } 以上四種方式推薦使用第三種；

列表樣式：list-style

定位： 1、靜態定位--static；按照標準文件流進行佈局；

2、相對定位--relative；相對自身；以自身的坐上角（座標點）為參考；會保留原來的位置不被其他元素侵佔；

3、絕對定位--absolute；參考的是頁面的左上角；絕對定位位置不會被保留；                        如果父級有定位，則參考父級的座標點；如果父級沒有定位，則會一級一級向上查詢，直到html標籤，中途有定位就會參照這個定位元素的座標點；

4、固定定位--fixed；相對於瀏覽器視窗的左上角；