CSS可以分為4部分
1. CSS樣式
1. 文字屬性
格式：非連寫---> font-family：設(shè)置文字的字體斜棚；例如：font-family:"宋體";
font-size：設(shè)置文字的到大刑犯帷边败；例如：font-size:16px;
font-style：設(shè)置文字的顯示風(fēng)格榆俺；例如：font-style:italic/oblique; 斜體/傾斜
font-weight：設(shè)置文字的粗細(xì)谒臼；例如：font-weight:bold;
以上屬性也可簡寫為
font：font-style font-weight font-size/line-height font-family艇挨；
可以不設(shè)置其中的某個(gè)值
注意點(diǎn)：簡寫只有同時(shí)指定字號(hào)和字體時(shí)才起作用
2. 文本屬性
格式：非連寫---> color：設(shè)置文本顏色
direction：設(shè)置文本方向。
line-height：設(shè)置行高。這里有個(gè)小巧決双泪，單行文本設(shè)置高度和行高一樣可以讓文本垂直居中持搜；
letter-spacing：設(shè)置字符間距密似。
text-align：對(duì)齊元素中的文本焙矛。值有：left/center/right；
text-decoration：向文本添加修飾残腌。
none 默認(rèn)村斟。定義標(biāo)準(zhǔn)的文本。這里可以用來取消a標(biāo)簽的下劃線抛猫；
underline 設(shè)置下劃線蟆盹。
overline 設(shè)置上劃線。
line-through 可以設(shè)置文本刪除線闺金。
blink 設(shè)置文本閃爍逾滥。
inherit 設(shè)置從父元素繼承 text-decoration 屬性的值。
text-indent：設(shè)置文本（中文的）首行縮進(jìn)败匹。通常設(shè)置為：2em寨昙；
text-shadow：設(shè)置文本陰影。
----->格式：text-shadow:水平偏移 垂直偏移 模糊度 陰影顏色；
注意點(diǎn)：快速添加陰影只需要編寫三個(gè)參數(shù)即可，text-shadow:水平偏移 垂直偏移 模糊度政恍；
默認(rèn)情況下陰影的顏色和文字的顏色一致
3. 背景
格式：非連寫---> background-attachment：設(shè)置背景圖片是否會(huì)設(shè)置滾動(dòng)條的滾動(dòng)而滾動(dòng)笼才，也叫關(guān)聯(lián)方式；
scroll:默認(rèn)值精肃，會(huì)滾動(dòng)；
fixed:不會(huì)滾動(dòng)；
background-color：設(shè)置元素的背景顏色缆巧。
background-image：設(shè)置元素背景為圖片。
background-position：設(shè)置背景圖像的位置豌拙，也叫背景的定位方式陕悬。
background-position：水平方向(left/center/right) 垂直方向(top/center/bottom)；
background-repeat:設(shè)置背景圖片是否平鋪姆蘸，也叫平鋪方式墩莫；
repeat 默認(rèn)，平鋪
repeat-x 設(shè)置背景圖將在水平方向平鋪逞敷。
repeat-y 設(shè)置背景圖將在垂直方向平鋪狂秦。
no-repeat 設(shè)置背景圖不平鋪。
以上的屬性可以簡寫為：
background:背景顏色 背景圖片 平鋪方式 關(guān)聯(lián)方式 定位方式推捐；
注意點(diǎn)：任何一個(gè)屬性都可以省略；
4. 鏈接
鏈接的四種狀態(tài)：
a:link - 普通的椭更、未被訪問的鏈接
a:visited - 用戶已訪問的鏈接
a:hover - 鼠標(biāo)指針位于鏈接的上方
a:active - 鏈接被點(diǎn)擊的時(shí)刻
5. 列表
列表 分為無序列表、有序列表和自定義列表,這里就不細(xì)講列表是什么了；
格式：非連寫---> list-style-image：將圖象設(shè)置為列表項(xiàng)標(biāo)志。
list-style-image:url(路徑記全稱);
list-style-position：設(shè)置列表中列表項(xiàng)標(biāo)志的位置。
list-style-position:outside(外邊)/inside(里邊);
list-style-type：設(shè)置列表項(xiàng)標(biāo)志的類型。
list-style-type:disc/circle/square/none;
中文意思就是：list-style-type:實(shí)心圓/空心圓/實(shí)心方塊/去掉列表符號(hào)簸喂；`
以上樣式也可以簡寫為：
list-style:url(路徑記全稱)/disc inside。
6. 表格
格式：非連寫---> border-collapse:設(shè)置是否把表格邊框合并為單一的邊框颜曾。
border-spacing:設(shè)置分隔單元格邊框的距離。
caption-side:設(shè)置表格標(biāo)題的位置。
empty-cells:設(shè)置是否顯示表格中的空單元格。
table-layout:設(shè)置顯示單元驶赏、行和列的算法嘱蛋。
2. CSS盒模型
1.CSS 盒模型概述
規(guī)定了元素框處理元素內(nèi)容凶伙、內(nèi)邊距傻挂、邊框和外邊距的方式。
2.內(nèi)邊距--padding
邊框和內(nèi)容之間的距離就是內(nèi)邊距
格式：非連寫---> padding-top: ;內(nèi)容距離頂部的距離
padding-right: ;內(nèi)容距離右邊的距離 padding-left:; padding -bottom:;
連寫-->padding:上右下左;
這三個(gè)屬性的取值省略時(shí)的規(guī)律
上右下左>上右下>左邊的取值和右邊的一樣
上右下左>上右>左邊的取值和右邊的一樣下邊的取值和上邊的一樣
上右下左>上>右下左邊取值和上邊一樣
注意點(diǎn)：1挖息、給標(biāo)簽設(shè)置內(nèi)邊距后,標(biāo)簽占有的寬度和高度會(huì)發(fā)生變化
2金拒、padding 屬性接受長度值或百分比值，但不允許使用負(fù)值套腹。
3绪抛、內(nèi)邊距也會(huì)有背景顏色
3.邊框--boder
快捷鍵
bd+ border:1px solid #000;實(shí)線
bt+ 頂部邊框 bl+左邊邊框 br+右邊邊框 bb+底部邊框
格式：非連寫---> border-width:設(shè)置邊框?qū)挾?
border-style:設(shè)置邊框顯示線形;
border-style:dashed(虛線)/dotted(小圓點(diǎn))/double(雙線)/solid(實(shí)線);
border-color:設(shè)置邊框顏色;
同時(shí)分別設(shè)置四邊不同的邊框樣式
border-width:上右下左;
border-style:上右下左;
border-color:上右下左;
以上樣式也可以簡寫
border：顏色 寬度 線類型;
注意點(diǎn)：1、顏色（默認(rèn)黑色）和寬度可以省略电禀，但是樣式里的線類型不可以省略幢码。
2、這三個(gè)屬性的取值省略時(shí)的規(guī)律
2.1鞭呕、上右下左>上右下>左邊的取值和右邊的一樣
2.2蛤育、上右下左>上右>左邊的取值和右邊的一樣下邊的取值和上邊的一樣
2.3宛官、上右下左>上>右下左邊取值和上邊一樣
4.外邊距--margin
圍繞在元素邊框的空白區(qū)域是外邊距,也可以通俗的說就是標(biāo)簽和標(biāo)簽之間的距離就是外邊距
格式：非連寫---> margin-top:;
連寫--->margin:上右下左;
注意點(diǎn)：1、外邊距的那一部分是沒有顏色的
2瓦糕、這三個(gè)屬性的取值省略時(shí)的規(guī)律
上右下左>上右下>左邊的取值和右邊的一樣
上右下左>上右>左邊的取值和右邊的一樣下邊的取值和上邊的一樣
上右下左>上>右下左邊取值和上邊一樣
5.CSS 外邊距合并
默認(rèn)情況下外邊距是不會(huì)疊加的底洗，而在默認(rèn)布局的垂直方向上，會(huì)出現(xiàn)合并現(xiàn)象咕娄，誰的外邊距比較大就聽誰的
3.定位
定位流首先可以分為四類
相對(duì)定位->relative
絕對(duì)定位->absolute
固定定位->fixed
靜態(tài)定位->static
相對(duì)定位 就是相對(duì)于自己以前在標(biāo)準(zhǔn)流中的位置來移動(dòng)
position:relative;
top/bottom:
left/right:
注意點(diǎn)：1亥揖、相對(duì)定位是 不 脫離標(biāo)準(zhǔn)流的，還是會(huì)占用一份空間的
2圣勒、相對(duì)定位.在同一個(gè)方向上的定位屬性只能使用一個(gè)
3费变、區(qū)分 塊級(jí)元素/行內(nèi)元素/行內(nèi)塊級(jí)元素
4、由于相對(duì)定位是不脫離標(biāo)準(zhǔn)流的圣贸，并且相對(duì)定位的元素會(huì)占用標(biāo)準(zhǔn)流中的位置挚歧，所以當(dāng)給相對(duì)定位的元素設(shè)置margin/padding等屬性的時(shí)候會(huì)影響到標(biāo)準(zhǔn)流的布局------>意思就是當(dāng)給相對(duì)定位的元素添加margin/padding屬性的時(shí)候，是會(huì)先添加到定位之前的盒子吁峻，而不是定位之后的盒子滑负。
相對(duì)定位應(yīng)用場景 1.用于對(duì)元素進(jìn)行微調(diào) 2.配合后面學(xué)習(xí)的絕對(duì)定位來使用
絕對(duì)定位 相對(duì)于body來定位
position:absolute;
top/bottom:
left/right:
注意點(diǎn)：1、絕對(duì)定位的元素是脫離標(biāo)準(zhǔn)流的
2用含、絕對(duì)定位的元素是不區(qū)分 塊級(jí)元素/行內(nèi)元素/行內(nèi)塊級(jí)元素
絕對(duì)定位參考點(diǎn)
1矮慕、規(guī)律
1).默認(rèn)所有絕對(duì)定位的元素，無論有沒有祖先元素啄骇，都會(huì)以body為參考點(diǎn)
2).如果一個(gè)絕對(duì)定位的元素有祖先元素痴鳄，并且祖先元素也是定位流(除了靜態(tài)定位)，那么這個(gè)絕對(duì)定位的元素就會(huì)以定位流的那個(gè)祖先元素作為參考點(diǎn)缸夹。
2.1).只要是這個(gè)絕對(duì)定位元素的祖先元素都可以
2.2). 指的定位流是指------->絕對(duì)定位/相對(duì)定位/固定定位
2.3).定位流中只有靜態(tài)定位不行
3).如果一個(gè)絕對(duì)定位的元素有祖先元素痪寻，并且祖先元素也是定位流,而且祖先元素中有多個(gè)元素都是定位流，那么這個(gè)絕對(duì)定位的元素會(huì)以離他最近的那個(gè)定位流的祖先元素為參考點(diǎn)
注意點(diǎn)：1.如果一個(gè)絕對(duì)定位的元素是以body作為參考點(diǎn)明未，那么其實(shí)是以網(wǎng)頁首屏的寬度和高度作為參考點(diǎn)槽华，而不是以整個(gè)網(wǎng)頁的寬度和高度作為參考點(diǎn)
2、一個(gè)絕對(duì)定位的元素會(huì)忽略祖先元素的padding
絕對(duì)定位里面常用的一些方法技巧：
絕對(duì)定位--子絕父相
子元素用絕對(duì)定位 父元素用相對(duì)定位
絕對(duì)定位--水平居中
position:absolute;
left:50%;
margin-left:負(fù)的(元素寬度的一半);
固定定位
position:fixed;
top/bottom:
left/right:
固定定位和背景關(guān)聯(lián)方式很像趟妥。
背景定位可以讓背景圖片不隨著滾動(dòng)條的滾蛋而滾動(dòng)猫态，而固定定位可以讓某個(gè)盒子不隨著滾動(dòng)條的滾動(dòng)而滾動(dòng)
注意點(diǎn)：1、固定定位的元素是脫離標(biāo)準(zhǔn)流的披摄，不會(huì)占用標(biāo)準(zhǔn)流中的空間
2亲雪、固定定位和絕對(duì)定位一樣不區(qū)分 行內(nèi)/塊級(jí)/行內(nèi)塊級(jí)
固定定位和絕對(duì)定位的區(qū)別：固定定位不會(huì)隨著滾動(dòng)條的滾動(dòng)而滾動(dòng)；
固定定位應(yīng)用場景:導(dǎo)航欄 疚膊、廣告
z-index屬性
作用：專門用于控制定位流的覆蓋關(guān)系
默認(rèn)情況下所有元素都有一個(gè)默認(rèn)的z-index屬性义辕，取值是0。
1寓盗、默認(rèn)情況下定位流的元素會(huì)蓋住標(biāo)準(zhǔn)流的元素
2灌砖、默認(rèn)情況下定位流元素后面編寫的會(huì)蓋住前面編寫的
3璧函、如果定位流的元素設(shè)置了z-index屬性，那么誰的z-index屬性比較大基显，誰就是顯示在上面
注意點(diǎn)：從父現(xiàn)象
1）如果兩個(gè)元素的父元素都沒有設(shè)置z-index屬性蘸吓，那么誰的z-index屬性比較大誰就顯示在上面。
2）如果兩個(gè)元素的父元素都設(shè)置了z-index屬性撩幽，那么子元素的z-index屬性就會(huì)失效库继，也就是說誰的父元素的z-index屬性比較大誰就會(huì)顯示在上面
浮動(dòng)
浮動(dòng)流排版方式 float:left/right;
浮動(dòng)元素排序規(guī)則
1.相同方向上的浮動(dòng)元素，先浮動(dòng)的元素會(huì)顯示在前;面窜醉，后浮動(dòng)的元素會(huì)顯示在后面宪萄。
2.不同方向上的浮動(dòng)元素，左浮動(dòng)會(huì)找左浮動(dòng)榨惰，右浮動(dòng)會(huì)找右浮動(dòng)拜英。
3.浮動(dòng)元素之后的位置，由浮動(dòng)元素浮動(dòng)之前在標(biāo)準(zhǔn)流中的位置來確定读串。
注意點(diǎn)：
1.浮動(dòng)流中沒有居中對(duì)齊,也就是沒有center這個(gè)取值
2.在浮動(dòng)流中是不可以使用margin:0 auto;
特點(diǎn)：
1.在浮動(dòng)流中是不區(qū)分塊級(jí)元素/行內(nèi)元素/行內(nèi)塊級(jí)元素的 ,無論是塊級(jí)元素/行內(nèi)元素/行內(nèi)塊級(jí)元素都可以水平排版
2在浮動(dòng)流中無論是.塊級(jí)元素/行內(nèi)元素/行內(nèi)塊級(jí)元素都可以設(shè)置寬高
3.綜上所述, 浮動(dòng)流中的元素和標(biāo)準(zhǔn)流中的行內(nèi)塊級(jí)元素很像
脫標(biāo)：脫離標(biāo)準(zhǔn)流
有浮動(dòng)流 就有清除浮動(dòng)流的方式
1.清除浮動(dòng)的第一種方式
給前面一個(gè)父元素設(shè)置高度
注意點(diǎn):在實(shí)際開發(fā)中, 我們能不寫高度就不寫高度, 所以這種方式用得很少
2.清除浮動(dòng)的第二種方式
給后面的盒子添加clear屬性
CSS clear屬性
取值：left 告訴瀏覽器不要去找前面的左浮動(dòng)元素
right 告訴瀏覽器不要去找前面的右浮動(dòng)元素
both 不要去找前面的左浮動(dòng)和有浮動(dòng)元素
none 默認(rèn)取值聊记，按照浮動(dòng)元素的排序規(guī)則來排序
注意：使用這種清除浮動(dòng)方式會(huì)使margin屬性會(huì)失效
3.清除浮動(dòng)的第三種方式
隔墻法：（在實(shí)際開發(fā)中不常用）
1)、外墻法：在2個(gè)盒子之間添加一個(gè)額外的塊級(jí)元素恢暖，給這個(gè)額外的塊級(jí)元素添加clear: both;屬性
注意點(diǎn)：外墻法它可以讓第二個(gè)和i子使用margin-top屬性
外墻法不可以讓第一個(gè)盒子使用margin-bottom屬性
這個(gè)額外的盒子可以設(shè)置多個(gè)類名 第一個(gè)類名可以設(shè)置clear屬性 第二個(gè)類名可以設(shè)置高度
2)、內(nèi)墻法：在第一個(gè)盒子中所有子元素最后添加一個(gè)額外的塊級(jí)元素
給這個(gè)額外添加的塊級(jí)元素設(shè)置clear: both;屬性
注意點(diǎn):內(nèi)墻法它可以讓第二個(gè)盒子使用margin-top屬性
內(nèi)墻法它可以讓第一個(gè)盒子使用margin-bottom屬性
外墻法和內(nèi)墻法區(qū)別?
外墻法不能撐起第一個(gè)盒子的高度, 而內(nèi)墻法可以撐起第一個(gè)盒子的高度
4.清除浮動(dòng)的第四種方式
使用偽元素選擇器的方式可以清除浮動(dòng)
本質(zhì)上就是內(nèi)墻法, 只不過是直接通過CSS代碼添加了內(nèi)墻, 其它特性和內(nèi)墻法都一樣
注意點(diǎn):IE6中不支持這種方式, 為了兼容IE6必須給前面的盒子添加*zoom:1;屬性
5.清除浮動(dòng)的第五種方式
overflow:hidden狰右；
作用：1.可以將超出標(biāo)簽范圍的內(nèi)容裁剪掉 2.可以清除浮動(dòng)
3.如果兩個(gè)盒子是嵌套關(guān)系杰捂，那么設(shè)置了里面一個(gè)盒子頂部的外邊距，外面一個(gè)盒子也會(huì)被頂下來棋蚌，如果外面的盒子不想被一起頂下來嫁佳，那么可以通過overflow:hidden；讓里面的盒子設(shè)置margin-top之后, 外面的盒子不被頂下來
注意點(diǎn):IE6中不支持這種方式, 為了兼容IE6必須給前面的盒子添加*zoom:1;屬性
4. CSS選擇器
1谷暮、id選擇器
格式：#id名稱{屬性：值;}
命名規(guī)則：由字母蒿往、數(shù)字、下劃線組成湿弦，但是不能以數(shù)字開頭瓤漏；
建議:在實(shí)際開發(fā)中，不建議使用颊埃，留給js用
2蔬充、類選擇器
格式：.類名{屬性：值;}
class="nac";//定義一個(gè)類名
.nac{屬性:值;}//在CSS里面用
命名規(guī)則與id一樣，一個(gè)標(biāo)簽可以有多個(gè)類名班利；class="nav1 nav2 nav3"
3饥漫、后代選擇器
格式：標(biāo)簽名稱1 標(biāo)簽名稱2{屬性:值;}
4、子元素選擇器
格式：標(biāo)簽名稱1>標(biāo)簽名稱2{屬性:值;}
div>ul>li>p{屬性:值;}
注意：用>符號(hào)好連接罗标，不能有空格
后代選擇器和子元素選擇器的區(qū)別
后代選擇器會(huì)選中指定標(biāo)簽中庸队，所有的特定后代標(biāo)簽
子元素選擇器只會(huì)選中指定標(biāo)簽中积蜻，所有的特定的直接標(biāo)簽；
5彻消、交集選擇器
格式：選擇器1選擇器2{屬性:值;}
注意點(diǎn)：選擇器之間沒有任何符號(hào)連接
6竿拆、并集選擇器
格式：選擇器1，選擇器2{屬性:值;}
使用,連接
7证膨、兄弟選擇器
兄弟選擇器又分為2類：
1如输、相鄰兄弟選擇器
作用：給指定選擇器后面緊跟的哪個(gè)選擇器選中的標(biāo)簽設(shè)置屬性
格式：選擇器1+選擇器2{屬性:值;}
2、通用兄弟選擇器
作用：給指定選擇器后面的所有選擇器選中的所有標(biāo)簽設(shè)置屬性
格式：選擇器1~選擇器2{屬性:值;}
8央勒、序選擇器
序選擇器也分為兩類：
1不见、同級(jí)別
不區(qū)分類型，用來選擇器同級(jí)別的第幾個(gè)標(biāo)簽崔步；
例如：p:first-child{屬性:值};意思就是選中同級(jí)別中的第一個(gè)p標(biāo)簽
2稳吮、同類型
用來選中同級(jí)別中同類型的第幾個(gè)標(biāo)簽
例如:p:first-of-type{屬性:值;}意思就是選中同級(jí)別中同類型的第一個(gè)p標(biāo)簽
9、偽元素選擇器
作用：就是給指定標(biāo)簽的內(nèi)容前面添加一個(gè)子元素或者給指定標(biāo)簽的內(nèi)容后面添加一個(gè)子元素井濒。
格式:
標(biāo)簽名稱::brfore{屬性:值; }
標(biāo)簽名稱::after{ 屬性:值; }
visibility:hidden; 防止內(nèi)容溢出
10灶似、偽類選擇器
修改a標(biāo)簽不同狀態(tài)的樣式
a:link{} 修改從未被訪問過狀態(tài)下的樣式
a:visited{} 修改被訪問過狀態(tài)下的樣式
a:hover{} 修改鼠標(biāo)懸停在a標(biāo)簽上狀態(tài)下的樣式
a:active{} 修改鼠標(biāo)長按狀態(tài)下的樣式
注意點(diǎn)：1、a標(biāo)簽的偽類選擇器可以單獨(dú)出現(xiàn)也可以同時(shí)一起出現(xiàn)
2瑞你、a標(biāo)簽的偽類選擇器如果一起出現(xiàn)酪惭，那么有嚴(yán)格的順序要求，
編寫順序必須要遵守愛恨原則 love hate
l(link)ov(visited)e h(hover)a(active)te
3者甲、如果默認(rèn)狀態(tài)的樣式和被訪問過狀態(tài)的樣式一樣春感，那么可以縮寫
a:link{color:green;}
a:visited{color:green;}
------>可簡寫為 a{color:green;}
建議：
1.在實(shí)際開發(fā)中編寫a標(biāo)簽的偽類選擇器最好寫在標(biāo)簽選擇器的后面
2.在實(shí)際開發(fā)中和a標(biāo)簽盒子相關(guān)的屬性都寫在標(biāo)簽選擇器中（顯示模式/寬度/高度/padding/margin）
3.在實(shí)際開發(fā)中和a標(biāo)簽文字/背景相關(guān)的都寫在偽類選擇器中
