CSS可以分為4部分
1. CSS樣式
1. 文字屬性
格式：非連寫---> font-family：設置文字的字體；例如：font-family:"宋體";
font-size：設置文字的到大小；例如：font-size:16px;
font-style：設置文字的顯示風格；例如：font-style:italic/oblique; 斜體/傾斜
font-weight：設置文字的粗細；例如：font-weight:bold;
以上屬性也可簡寫為
font：font-style font-weight font-size/line-height font-family；
可以不設置其中的某個值
注意點：簡寫只有同時指定字號和字體時才起作用
2. 文本屬性
格式：非連寫---> color：設置文本顏色
direction：設置文本方向。
line-height：設置行高。這里有個小巧決，單行文本設置高度和行高一樣可以讓文本垂直居中；
letter-spacing：設置字符間距。
text-align：對齊元素中的文本。值有：left/center/right；
text-decoration：向文本添加修飾。
none 默認。定義標準的文本。這里可以用來取消a標簽的下劃線；
underline 設置下劃線。
overline 設置上劃線。
line-through 可以設置文本刪除線。
blink 設置文本閃爍。
inherit 設置從父元素繼承 text-decoration 屬性的值。
text-indent：設置文本（中文的）首行縮進。通常設置為：2em；
text-shadow：設置文本陰影。
----->格式：text-shadow:水平偏移 垂直偏移 模糊度 陰影顏色；
注意點：快速添加陰影只需要編寫三個參數即可，text-shadow:水平偏移 垂直偏移 模糊度；
默認情況下陰影的顏色和文字的顏色一致
3. 背景
格式：非連寫---> background-attachment：設置背景圖片是否會設置滾動條的滾動而滾動，也叫關聯方式；
scroll:默認值，會滾動；
fixed:不會滾動；
background-color：設置元素的背景顏色。
background-image：設置元素背景為圖片。
background-position：設置背景圖像的位置，也叫背景的定位方式。
background-position：水平方向(left/center/right) 垂直方向(top/center/bottom)；
background-repeat:設置背景圖片是否平鋪，也叫平鋪方式；
repeat 默認，平鋪
repeat-x 設置背景圖將在水平方向平鋪。
repeat-y 設置背景圖將在垂直方向平鋪。
no-repeat 設置背景圖不平鋪。
以上的屬性可以簡寫為：
background:背景顏色 背景圖片 平鋪方式 關聯方式 定位方式；
注意點：任何一個屬性都可以省略；
4. 鏈接
鏈接的四種狀態：
a:link - 普通的、未被訪問的鏈接
a:visited - 用戶已訪問的鏈接
a:hover - 鼠標指針位于鏈接的上方
a:active - 鏈接被點擊的時刻
5. 列表
列表 分為無序列表、有序列表和自定義列表,這里就不細講列表是什么了；
格式：非連寫---> list-style-image：將圖象設置為列表項標志。
list-style-image:url(路徑記全稱);
list-style-position：設置列表中列表項標志的位置。
list-style-position:outside(外邊)/inside(里邊);
list-style-type：設置列表項標志的類型。
list-style-type:disc/circle/square/none;
中文意思就是：list-style-type:實心圓/空心圓/實心方塊/去掉列表符號；`
以上樣式也可以簡寫為：
list-style:url(路徑記全稱)/disc inside。
6. 表格
格式：非連寫---> border-collapse:設置是否把表格邊框合并為單一的邊框。
border-spacing:設置分隔單元格邊框的距離。
caption-side:設置表格標題的位置。
empty-cells:設置是否顯示表格中的空單元格。
table-layout:設置顯示單元、行和列的算法。
2. CSS盒模型
1.CSS 盒模型概述
規定了元素框處理元素內容、內邊距、邊框和外邊距的方式。
2.內邊距--padding
邊框和內容之間的距離就是內邊距
格式：非連寫---> padding-top: ;內容距離頂部的距離
padding-right: ;內容距離右邊的距離 padding-left:; padding -bottom:;
連寫-->padding:上右下左;
這三個屬性的取值省略時的規律
上右下左>上右下>左邊的取值和右邊的一樣
上右下左>上右>左邊的取值和右邊的一樣下邊的取值和上邊的一樣
上右下左>上>右下左邊取值和上邊一樣
注意點：1、給標簽設置內邊距后,標簽占有的寬度和高度會發生變化
2、padding 屬性接受長度值或百分比值，但不允許使用負值。
3、內邊距也會有背景顏色
3.邊框--boder
快捷鍵
bd+ border:1px solid #000;實線
bt+ 頂部邊框 bl+左邊邊框 br+右邊邊框 bb+底部邊框
格式：非連寫---> border-width:設置邊框寬度;
border-style:設置邊框顯示線形;
border-style:dashed(虛線)/dotted(小圓點)/double(雙線)/solid(實線);
border-color:設置邊框顏色;
同時分別設置四邊不同的邊框樣式
border-width:上右下左;
border-style:上右下左;
border-color:上右下左;
以上樣式也可以簡寫
border：顏色 寬度 線類型;
注意點：1、顏色（默認黑色）和寬度可以省略，但是樣式里的線類型不可以省略。
2、這三個屬性的取值省略時的規律
2.1、上右下左>上右下>左邊的取值和右邊的一樣
2.2、上右下左>上右>左邊的取值和右邊的一樣下邊的取值和上邊的一樣
2.3、上右下左>上>右下左邊取值和上邊一樣
4.外邊距--margin
圍繞在元素邊框的空白區域是外邊距,也可以通俗的說就是標簽和標簽之間的距離就是外邊距
格式：非連寫---> margin-top:;
連寫--->margin:上右下左;
注意點：1、外邊距的那一部分是沒有顏色的
2、這三個屬性的取值省略時的規律
上右下左>上右下>左邊的取值和右邊的一樣
上右下左>上右>左邊的取值和右邊的一樣下邊的取值和上邊的一樣
上右下左>上>右下左邊取值和上邊一樣
5.CSS 外邊距合并
默認情況下外邊距是不會疊加的，而在默認布局的垂直方向上，會出現合并現象，誰的外邊距比較大就聽誰的
3.定位
定位流首先可以分為四類
相對定位->relative
絕對定位->absolute
固定定位->fixed
靜態定位->static
相對定位 就是相對于自己以前在標準流中的位置來移動
position:relative;
top/bottom:
left/right:
注意點：1、相對定位是 不 脫離標準流的，還是會占用一份空間的
2、相對定位.在同一個方向上的定位屬性只能使用一個
3、區分 塊級元素/行內元素/行內塊級元素
4、由于相對定位是不脫離標準流的，并且相對定位的元素會占用標準流中的位置，所以當給相對定位的元素設置margin/padding等屬性的時候會影響到標準流的布局------>意思就是當給相對定位的元素添加margin/padding屬性的時候，是會先添加到定位之前的盒子，而不是定位之后的盒子。
相對定位應用場景 1.用于對元素進行微調 2.配合后面學習的絕對定位來使用
絕對定位 相對于body來定位
position:absolute;
top/bottom:
left/right:
注意點：1、絕對定位的元素是脫離標準流的
2、絕對定位的元素是不區分 塊級元素/行內元素/行內塊級元素
絕對定位參考點
1、規律
1).默認所有絕對定位的元素，無論有沒有祖先元素，都會以body為參考點
2).如果一個絕對定位的元素有祖先元素，并且祖先元素也是定位流(除了靜態定位)，那么這個絕對定位的元素就會以定位流的那個祖先元素作為參考點。
2.1).只要是這個絕對定位元素的祖先元素都可以
2.2). 指的定位流是指------->絕對定位/相對定位/固定定位
2.3).定位流中只有靜態定位不行
3).如果一個絕對定位的元素有祖先元素，并且祖先元素也是定位流,而且祖先元素中有多個元素都是定位流，那么這個絕對定位的元素會以離他最近的那個定位流的祖先元素為參考點
注意點：1.如果一個絕對定位的元素是以body作為參考點，那么其實是以網頁首屏的寬度和高度作為參考點，而不是以整個網頁的寬度和高度作為參考點
2、一個絕對定位的元素會忽略祖先元素的padding
絕對定位里面常用的一些方法技巧：
絕對定位--子絕父相
子元素用絕對定位 父元素用相對定位
絕對定位--水平居中
position:absolute;
left:50%;
margin-left:負的(元素寬度的一半);
固定定位
position:fixed;
top/bottom:
left/right:
固定定位和背景關聯方式很像。
背景定位可以讓背景圖片不隨著滾動條的滾蛋而滾動，而固定定位可以讓某個盒子不隨著滾動條的滾動而滾動
注意點：1、固定定位的元素是脫離標準流的，不會占用標準流中的空間
2、固定定位和絕對定位一樣不區分 行內/塊級/行內塊級
固定定位和絕對定位的區別：固定定位不會隨著滾動條的滾動而滾動；
固定定位應用場景:導航欄 、廣告
z-index屬性
作用：專門用于控制定位流的覆蓋關系
默認情況下所有元素都有一個默認的z-index屬性，取值是0。
1、默認情況下定位流的元素會蓋住標準流的元素
2、默認情況下定位流元素后面編寫的會蓋住前面編寫的
3、如果定位流的元素設置了z-index屬性，那么誰的z-index屬性比較大，誰就是顯示在上面
注意點：從父現象
1）如果兩個元素的父元素都沒有設置z-index屬性，那么誰的z-index屬性比較大誰就顯示在上面。
2）如果兩個元素的父元素都設置了z-index屬性，那么子元素的z-index屬性就會失效，也就是說誰的父元素的z-index屬性比較大誰就會顯示在上面
浮動
浮動流排版方式 float:left/right;
浮動元素排序規則
1.相同方向上的浮動元素，先浮動的元素會顯示在前;面，后浮動的元素會顯示在后面。
2.不同方向上的浮動元素，左浮動會找左浮動，右浮動會找右浮動。
3.浮動元素之后的位置，由浮動元素浮動之前在標準流中的位置來確定。
注意點：
1.浮動流中沒有居中對齊,也就是沒有center這個取值
2.在浮動流中是不可以使用margin:0 auto;
特點：
1.在浮動流中是不區分塊級元素/行內元素/行內塊級元素的 ,無論是塊級元素/行內元素/行內塊級元素都可以水平排版
2在浮動流中無論是.塊級元素/行內元素/行內塊級元素都可以設置寬高
3.綜上所述, 浮動流中的元素和標準流中的行內塊級元素很像
脫標：脫離標準流
有浮動流 就有清除浮動流的方式
1.清除浮動的第一種方式
給前面一個父元素設置高度
注意點:在實際開發中, 我們能不寫高度就不寫高度, 所以這種方式用得很少
2.清除浮動的第二種方式
給后面的盒子添加clear屬性
CSS clear屬性
取值：left 告訴瀏覽器不要去找前面的左浮動元素
right 告訴瀏覽器不要去找前面的右浮動元素
both 不要去找前面的左浮動和有浮動元素
none 默認取值，按照浮動元素的排序規則來排序
注意：使用這種清除浮動方式會使margin屬性會失效
3.清除浮動的第三種方式
隔墻法：（在實際開發中不常用）
1)、外墻法：在2個盒子之間添加一個額外的塊級元素，給這個額外的塊級元素添加clear: both;屬性
注意點：外墻法它可以讓第二個和i子使用margin-top屬性
外墻法不可以讓第一個盒子使用margin-bottom屬性
這個額外的盒子可以設置多個類名 第一個類名可以設置clear屬性 第二個類名可以設置高度
2)、內墻法：在第一個盒子中所有子元素最后添加一個額外的塊級元素
給這個額外添加的塊級元素設置clear: both;屬性
注意點:內墻法它可以讓第二個盒子使用margin-top屬性
內墻法它可以讓第一個盒子使用margin-bottom屬性
外墻法和內墻法區別?
外墻法不能撐起第一個盒子的高度, 而內墻法可以撐起第一個盒子的高度
4.清除浮動的第四種方式
使用偽元素選擇器的方式可以清除浮動
本質上就是內墻法, 只不過是直接通過CSS代碼添加了內墻, 其它特性和內墻法都一樣
注意點:IE6中不支持這種方式, 為了兼容IE6必須給前面的盒子添加*zoom:1;屬性
5.清除浮動的第五種方式
overflow:hidden；
作用：1.可以將超出標簽范圍的內容裁剪掉 2.可以清除浮動
3.如果兩個盒子是嵌套關系，那么設置了里面一個盒子頂部的外邊距，外面一個盒子也會被頂下來，如果外面的盒子不想被一起頂下來，那么可以通過overflow:hidden；讓里面的盒子設置margin-top之后, 外面的盒子不被頂下來
注意點:IE6中不支持這種方式, 為了兼容IE6必須給前面的盒子添加*zoom:1;屬性
4. CSS選擇器
1、id選擇器
格式：#id名稱{屬性：值;}
命名規則：由字母、數字、下劃線組成，但是不能以數字開頭；
建議:在實際開發中，不建議使用，留給js用
2、類選擇器
格式：.類名{屬性：值;}
class="nac";//定義一個類名
.nac{屬性:值;}//在CSS里面用
命名規則與id一樣，一個標簽可以有多個類名；class="nav1 nav2 nav3"
3、后代選擇器
格式：標簽名稱1 標簽名稱2{屬性:值;}
4、子元素選擇器
格式：標簽名稱1>標簽名稱2{屬性:值;}
div>ul>li>p{屬性:值;}
注意：用>符號好連接，不能有空格
后代選擇器和子元素選擇器的區別
后代選擇器會選中指定標簽中，所有的特定后代標簽
子元素選擇器只會選中指定標簽中，所有的特定的直接標簽；
5、交集選擇器
格式：選擇器1選擇器2{屬性:值;}
注意點：選擇器之間沒有任何符號連接
6、并集選擇器
格式：選擇器1，選擇器2{屬性:值;}
使用,連接
7、兄弟選擇器
兄弟選擇器又分為2類：
1、相鄰兄弟選擇器
作用：給指定選擇器后面緊跟的哪個選擇器選中的標簽設置屬性
格式：選擇器1+選擇器2{屬性:值;}
2、通用兄弟選擇器
作用：給指定選擇器后面的所有選擇器選中的所有標簽設置屬性
格式：選擇器1~選擇器2{屬性:值;}
8、序選擇器
序選擇器也分為兩類：
1、同級別
不區分類型，用來選擇器同級別的第幾個標簽；
例如：p:first-child{屬性:值};意思就是選中同級別中的第一個p標簽
2、同類型
用來選中同級別中同類型的第幾個標簽
例如:p:first-of-type{屬性:值;}意思就是選中同級別中同類型的第一個p標簽
9、偽元素選擇器
作用：就是給指定標簽的內容前面添加一個子元素或者給指定標簽的內容后面添加一個子元素。
格式:
標簽名稱::brfore{屬性:值; }
標簽名稱::after{ 屬性:值; }
visibility:hidden; 防止內容溢出
10、偽類選擇器
修改a標簽不同狀態的樣式
a:link{} 修改從未被訪問過狀態下的樣式
a:visited{} 修改被訪問過狀態下的樣式
a:hover{} 修改鼠標懸停在a標簽上狀態下的樣式
a:active{} 修改鼠標長按狀態下的樣式
注意點：1、a標簽的偽類選擇器可以單獨出現也可以同時一起出現
2、a標簽的偽類選擇器如果一起出現，那么有嚴格的順序要求，
編寫順序必須要遵守愛恨原則 love hate
l(link)ov(visited)e h(hover)a(active)te
3、如果默認狀態的樣式和被訪問過狀態的樣式一樣，那么可以縮寫
a:link{color:green;}
a:visited{color:green;}
------>可簡寫為 a{color:green;}
建議：
1.在實際開發中編寫a標簽的偽類選擇器最好寫在標簽選擇器的后面
2.在實際開發中和a標簽盒子相關的屬性都寫在標簽選擇器中（顯示模式/寬度/高度/padding/margin）
3.在實際開發中和a標簽文字/背景相關的都寫在偽類選擇器中
