css 選擇器

標簽選擇器：

概念：通過標簽名去選擇標簽元素彭则。
書寫：標簽名
選中范圍：html中所有標簽名一致的標簽嘿期。
注意：標簽選擇器可以選中所有同名的標簽隅津，會忽視掉html的嵌套關(guān)系寝杖。
優(yōu)點：可以選中全部同名標簽耀态，可以對標簽設(shè)置公共樣式狠轻。
缺點：不能對局部的標簽添加特殊樣式氓栈。

id 選擇器：

概念：通過id屬性選擇標簽。
書寫：#id 屬性名
選中范圍：只能選中一個標簽
注意：每個id的屬性值必須是唯一的拐云。

類選擇器：

概念：通過標簽的class屬性選擇標簽罢猪。
書寫：.class屬性值
選中范圍：相同class名稱的標簽。
注意：class屬性名可以與其他標簽相同叉瘩。
特點：
    1.多個不同的標簽不區(qū)分標簽類型膳帕，只要class的屬性值相同，就會被選中。
    2.一個標簽可以有多個class屬性值危彩，屬性值之間用空格隔開攒磨，每個屬性值組成的選擇器都可以選中這個標簽，每個選擇器后面的樣式都會添加給這個標簽汤徽。
優(yōu)點：
    1.通過一個類選擇器進行多選娩缰，選中多個標簽添加公共樣式。
    2.原子性谒府，一個標簽可以被多個類選擇器選中拼坎，可以將所有樣式進行分離，分別提取公共樣式和單獨樣式完疫，節(jié)省代碼量泰鸡。
彩蛋：在實際開發(fā)中，一般使用class選擇器為標簽添加樣式壳鹤，使用id選擇器為標簽添加js行為盛龄。

后代選擇器：

概念：后代選擇器也叫做包含選擇器，通過標簽之間存在的嵌套關(guān)系去選擇元素芳誓，基本組成部分就是基礎(chǔ)選擇器余舶。
書寫：空格表示后代，基礎(chǔ)選擇器之間用空格隔開兆沙∨费浚空格前面的選擇器必須是后面的祖先級。
選擇范圍：通過一系列的基礎(chǔ)選擇器縮小范圍葛圃，由最終的一個選擇器確定選中標簽千扔。

并集選擇器：

概念：不同選擇器選中的元素都要設(shè)置相同的樣式，可以將多個選擇器同時選中添加樣式库正。
書寫：選擇器中間用英文逗號隔開曲楚，最后一個選擇器不能添加逗號。
優(yōu)點：
    1.如果多個標簽具有公共樣式褥符，但是不能用一個選擇器選中龙誊，可以使用并集寫法。
    2.可以使用標簽選擇器的并集寫法喷楣，進行默認樣式的清除趟大，替換通配符功能。

繼承性

概念：如果一個標簽沒有設(shè)置過一些樣式铣焊，它的祖先級標簽曾經(jīng)設(shè)置過逊朽，在瀏覽器中該標簽也加載了這個樣式，這些樣式都是從祖先級標簽中繼承來的曲伊，這種現(xiàn)象就是繼承性叽讳。能夠被繼承的樣式是所有文字相關(guān)式的屬性，其他的屬性都不能被繼承。
應(yīng)用：可以將頁面中出現(xiàn)最多的文字格式設(shè)置到body標簽中岛蚤，后期所有的標簽中的文字屬性都可以從body標簽中繼承邑狸。

層疊性

概念：解決同一標簽中設(shè)置多組樣式的展示問題。
判斷方法：
    -選中目標：
        1.比較選擇器權(quán)重涤妒，權(quán)重高的層疊權(quán)重低的单雾。
        2.如果權(quán)重相同，則比較css書寫順序她紫。
    -選中目標祖先級：
        1.比較就近原則铁坎，HTML結(jié)構(gòu)中距離目標標簽近的層疊遠的。
        2.如果距離相同犁苏，比較選擇器的權(quán)重，權(quán)重大的層疊權(quán)重小的扩所。
        3.如果距離和權(quán)重都相同围详，則比較css的書寫順序。后面的層疊前面的祖屏。
選擇器權(quán)重：
    id選擇器 > 類選擇器 > 標簽選擇器 > 通配符選擇器

css 常用屬性

文字屬性

color

作用：給文字添加顏色
屬性名：color
屬性值：顏色名助赞，顏色值。
語法：
    p {
        color: red;
    }

font-family

作用：設(shè)置網(wǎng)頁展示字體袁勺。
屬性名：font-family
屬性值：字體名稱

注意：
    1.font-family可以從左到右依次設(shè)置多個字體雹食，在加載時會按照順序選擇可執(zhí)行的字體。最終只會執(zhí)行一個字體期丰。
    2.瀏覽器選擇字體的機制是根據(jù)自己機器本身自帶的字體進行選擇的群叶，如果沒有可選字體，則瀏覽器會使用默認字體钝荡。
語法：
    p {
        font-family: "微軟雅黑", "宋體"
    }

font-size

作用：設(shè)置字體大小
屬性名：font-size
屬性值：number
單位：px街立，em等
語法：
    p {
        font-size: 12px;
    }

font-weight

作用：設(shè)置字體粗細
屬性名：font-weight
屬性值：400表示不加粗，700表示字體加粗
語法：
    p {
        font-weight: 400;
    }

font-style

作用：定義字體斜體效果
屬性名：font-style
屬性值：normal 正常（默認）埠通，italic 斜體赎离，oblique 斜體。
注意：italic和oblique都表示斜體端辱，但是有些字體有italic屬性梁剔，有些沒有italic屬性，oblique就是讓沒有italic屬性的字體也能夠有斜體效果舞蔽。
語法：
    p {
        font-style: normal;
    }

line-height

作用：設(shè)置的是一行文字實際占有的高度荣病，文字字號在行高中是垂直居中的。
屬性名：line-height
屬性值：·px像素值喷鸽，設(shè)置具體的像素值众雷。
       ·百分比數(shù)值，設(shè)置的本身字號像素值的百分比。
注意：字體行高的量取一般是從第一行文字的頂部量取到第二行文字的頂部砾省。

字體綜合 font

字體鸡岗，字號，行高编兄，加粗轩性，斜體都是font綜合屬性的單一屬性，可以進行合寫狠鸳，屬性值可以有2到多個揣苏，值之間用空格分隔。
注意：1.在進行復(fù)寫的時候件舵，必須有字號和字體卸察，并且字號在前，字體在后铅祸，不能顛倒順序坑质。
    2.一般情況下是對字號，行高和字體進行復(fù)合寫法临梗，順序不能顛倒涡扼，并且字號和行高之間不是用空格分隔，必須用"/"分隔盟庞。
    3.如果想要設(shè)置字體加粗和斜體樣式吃沪，這兩個必須寫在最前面，兩者的順序可以顛倒什猖，后面的字號/行高 字體樣式不能互換位置票彪。

文本屬性

水平對齊 text-align

作用：設(shè)置文本水平方向?qū)R。
語法：text-align: 屬性值;
屬性：left：左對齊
     right：右對齊
     center：居中對齊

文本修飾 text-decoration

作用：設(shè)置文本整體是否有線條的修飾效果不狮。如添加下劃線或者刪除線抹镊。
語法：text-decoration: 屬性值;
屬性：none：沒有修飾，默認值荤傲。
     overline：上劃線
     line-through：中劃線垮耳，刪除線，del標簽的默認值遂黍。
     underline：下劃線终佛，a標簽的默認值。

文本縮進 text-indent

作用：設(shè)置段落首行是否進行縮進雾家。
語法：text-indent: 屬性值
屬性：px單位：縮進多少像素值
     em單位：縮進字體倍數(shù)的位置铃彰。
     百分比：表示縮進文字所在父元素標簽寬度的百分比。
注意：屬性值區(qū)分正負芯咧，正數(shù)表示向右縮進牙捉，負數(shù)表示向左縮進竹揍。

vertical-align 屬性應(yīng)用

描述：用于設(shè)置圖片或者表單(行內(nèi)塊元素)和文字垂直對齊。但是它只針對行內(nèi)元素或者行內(nèi)塊元素有效邪铲。
語法：vertical-align: 屬性值;

vertical-align 屬性值

盒子模型

概念：盒子模型包含了五個屬性带到，分別是寬度（width）昧碉，高度（height），邊框（border）揽惹，內(nèi)邊距（padding）和外邊距（margin）被饿。

寬度

作用：設(shè)置盒子模型的寬度
語法：width：屬性值；
屬性：auto： 默認值搪搏，瀏覽器會自定計算寬度狭握。
     px：像素值定義的寬度。
     %：參考父元素寬度的百分比進行計算疯溺。
注意：如果不設(shè)置寬度哥牍，默認是auto，如果是塊元素喝检，則會獨占一行，根據(jù)父元素的寬度計算他的寬度撼泛，如果是行內(nèi)元素挠说，則會根據(jù)內(nèi)容的寬度計算標簽的寬度。

高度

作用：設(shè)置可添加內(nèi)容元素的區(qū)域的高度愿题。
語法：height：屬性值损俭；
屬性：同寬度一樣

內(nèi)邊距 padding

作用：設(shè)置的是元素的邊框內(nèi)部到寬高區(qū)域之間的距離。
特點：可以加載背景潘酗，但是不能書寫內(nèi)容杆兵。
語法：padding：屬性值;
屬性值：常以px為單位的數(shù)值。
注意：1.padding是一個復(fù)合型的寫法仔夺，padding-top琐脏， padding-right，padding-bottom缸兔，padding-left的綜合寫法日裙。
      2.順序是順時針加載的。
      3.根據(jù)四個方向的屬性值的不同惰蜜，區(qū)分了padding的四種表示法昂拂。
padding表示法：
    1.padding：10px；表示top抛猖，right格侯，bottom鼻听，left的內(nèi)邊距都是10px。
    2.padding：10px 20px联四；表示top和bottom內(nèi)邊距是10px撑碴，right和left內(nèi)邊距是20px。
    3.padding：10px 20px 30px;表示top內(nèi)邊距是10px碎连，bottom內(nèi)邊距是20px灰羽，left和right內(nèi)邊距是30px。
    4.padding：10px 20px 30px 40px鱼辙；分別表示top廉嚼，right，bottom和left四個方向的內(nèi)邊距倒戏。

邊框 border

作用：設(shè)置的是內(nèi)邊距外面的邊界區(qū)域怠噪，最為盒子實體化的最外層。
語法：border：1px solid black杜跷；
屬性值：由三個值組成傍念，分為線的寬度，顏色和形狀葛闷。

外邊距 margin

作用：設(shè)置盒子與盒子之間的距離憋槐。
特點：不能渲染背景。
語法：margin：10px淑趾；外邊距的設(shè)置方法與內(nèi)邊距的設(shè)置方法一致阳仔。
屬性值：常以px為單位的數(shù)值。

overflow 屬性

作用：設(shè)置文本域溢出部分內(nèi)容的顯示效果扣泊；
語法：overflow：屬性值
屬性值：
    visible：默認值近范，展示溢出內(nèi)容。
    hidden：隱藏溢出內(nèi)容延蟹，超過邊框范圍的內(nèi)容直接隱藏评矩。
    scroll：溢出的部分出現(xiàn)滾動條，可以拖拽滾動條展示溢出內(nèi)容阱飘。不論有沒有溢出的內(nèi)容斥杜，x軸和y軸都會出現(xiàn)滾動條。
    auto：只有在溢出的部分才會出現(xiàn)滾動條沥匈，如果內(nèi)容沒有溢出果录，不會出現(xiàn)滾動條效果。

居中

1.單行文字垂直居中的時候咐熙，可以設(shè)置文字的line-height等于盒子的高度弱恒。
2.如果是多行文字，設(shè)置居中的時候可以不給盒子設(shè)置高度棋恼，讓文本內(nèi)容撐開盒子或者盒子高度與文本內(nèi)容的高度相等返弹。也可以在此基礎(chǔ)之上添加上下相同的padding锈玉。
3.元素水平居中，當父盒子的寬度大于子盒子的寬度的時候义起，可以給子盒子設(shè)置margin屬性拉背，屬性值垂直方向隨便設(shè)置，水平方向設(shè)置值為auto默终。auto只有在水平方向設(shè)置才有效果椅棺，當水平方向設(shè)置auto的時候，水平方向的邊距會無限增大齐蔽，直到撐滿整個父元素除了子元素寬度之外的剩余區(qū)域两疚。

盒模型自動內(nèi)減

父子盒模型中，如果父元素設(shè)置了寬度含滴，并且子元素是塊級元素诱渤，獨自占據(jù)一行，那么可以不設(shè)置子元素的寬度谈况，子元素的寬度會自動加載父元素的寬度勺美，如果同時設(shè)置了子元素的padding，margin和border碑韵，此時子元素的寬度會自動縮減赡茸。

margin 塌陷

margin塌陷現(xiàn)象：在垂直方向如果有兩個元素的外邊距相遇，瀏覽器中加載的真正的外邊距并不是兩個margin的和祝闻，而是兩個邊距中值比較大的占卧。邊距值小的塌陷到了邊距值大的內(nèi)部。
解決方法：
    1.同級盒子的時候治筒，可以將margin值設(shè)置到一個盒子上，只給一個元素設(shè)置舷蒲。
    2.父子元素的時候耸袜，讓兩個邊距不要相遇，可以直接在父盒子內(nèi)添加padding牲平，解決margin父子塌陷問題堤框。

標準文檔流

塊級元素

特點：
    1.塊級元素可以設(shè)置寬高，在瀏覽器中正常加載纵柿。
    2.塊級元素獨占一行蜈抓，不能與其它標簽在一行展示。
    3.只有塊級元素在不設(shè)置寬的時候昂儒，會加載他的父級元素的寬度沟使，不設(shè)置高度時，元素的高度由元素內(nèi)的內(nèi)容撐開渊跋。

行內(nèi)元素

1.行內(nèi)元素不能設(shè)置寬高腊嗡，其他屬性（border着倾，padding，margin）雖然可以設(shè)置燕少，但是會出現(xiàn)加載問題卡者。
2.行內(nèi)元素可以與其他行內(nèi)元素并排一行顯示。
3.行內(nèi)元素?zé)o論是否設(shè)置寬高客们，寬度和高度都只能被內(nèi)容自動撐開崇决。

行內(nèi)塊元素

1.行內(nèi)塊元素可以設(shè)置寬高。
2.行內(nèi)塊元素可以和其他的元素并排展示在一行底挫。
3.行內(nèi)塊元素如果不設(shè)置寬高恒傻，那么默認寬高是由內(nèi)容自動撐開。
4.行內(nèi)塊元素具有標準流的微觀性值凄敢，例如空白折疊現(xiàn)象碌冶。

display

作用：更改標簽的顯示模式
語法：選擇器 {display: 屬性值}
屬性值：
    block：表示元素要以塊級模式加載，具備塊級元素的特性涝缝。
    inline：表示元素要以行內(nèi)模式加載扑庞，具備行內(nèi)元素的特性。
    inline-block：表示標簽以行內(nèi)塊模式加載拒逮，具備行內(nèi)塊元素的特性罐氨。
    none：表示標簽及內(nèi)部內(nèi)容直接隱藏，讓出原有標準流的位置滩援。

浮動

為什么需要浮動栅隐？

有很多的布局效果，標準流是無法完成的玩徊，次是就可以利用浮動來完成布局租悄，因為浮動可以改變元素標簽?zāi)J的排列順序《鞲ぃ可以讓多個塊級標簽在一行排列顯示泣棋。

網(wǎng)頁布局準則：

多個塊級元素縱向排列找標準流，多個塊級元素橫向排列找浮動畔塔。一般先用標準流的父元素排列上下位置潭辈，之后內(nèi)部的子元素采取浮動排列左右位置。

浮動概念

float屬性用來設(shè)置浮動澈吨，將其移動到一邊把敢，直到左側(cè)邊緣或者右側(cè)邊緣觸碰到另一個邊框。

float 屬性

left：左浮動
right：右浮動

浮動的特性

1.浮動元素回脫離標準流谅辣。浮動的盒子不再保留原來的位置修赞。
2.浮動的元素會一行內(nèi)顯示并且元素依次貼邊。
3.浮動的元素會具有行內(nèi)塊的特性桑阶。
    ·如果是行內(nèi)元素的盒子添加了浮動榔组，則有行內(nèi)塊元素的特性熙尉。
    ·如果塊級盒子沒有設(shè)置寬度，默認寬度和父級寬度一樣搓扯，添加浮動之后检痰，如果沒有設(shè)置寬度，則寬度由元素中的內(nèi)容寬度決定锨推。
    ·浮動的盒子中間是沒有空隙的铅歼，是緊挨在一起的。

浮動的問題

1.如果父元素沒有設(shè)置高度换可，子元素設(shè)置浮動后椎椰，子元素會脫離文檔標準流，則父元素不會被子元素的內(nèi)容撐開沾鳄。從而父元素沒有高度慨飘。
2.父元素沒有高度，會影響后面標準流元素的位置译荞，如果浮動的子元素足夠高時瓤的，有可能影響到后面浮動元素的貼邊。

浮動布局的注意點

1.浮動和標準流的父盒子搭配吞歼。
2.浮動的盒子只會影響盒子后面的標準流圈膏，不會影響前面的標準流。

清除浮動

本質(zhì)：清除浮動元素造成的影響篙骡。
語法：選擇器 {clear：屬性值}
屬性值：
    left：清除左邊的浮動
    right：清除右側(cè)的浮動
    both：清除左右兩側(cè)的浮動

清除浮動方法

1.額外標簽法稽坤，在左后一個浮動元素標簽后面添加一個空標簽，設(shè)置clear屬性糯俗。但是會造成添加許多無意義的標簽尿褪，結(jié)構(gòu)較差。必須是塊級元素得湘，不能是行內(nèi)元素杖玲。
2.給父級標簽添加overflow（overflow：hidden）。但是無法展示父級溢出的部分忽刽。
3.:after偽元素天揖，給父元素添加夺欲。額外標簽法的升級版跪帝，實際是css在父級元素中添加了一個新的標簽。
    clear::after {
        content: "";
        display: block;
        clear: both
    }
4.雙偽類清除浮動
    .box::before,
    .box::after {
        content: "";
        display: block;
        clear: both;
    }
    <!-- 兼容IE6和IE7 -->
    .box {
        *zoom: 1;
    }

偽類

概念：偽類不需要給標簽添加任何屬性些阅，偽類名是語法提前規(guī)定好的伞剑，書寫偽類的時候必須搭配選擇器一起使用，偽類選擇器后面添加的樣式不一定能夠立刻就加載到瀏覽器上市埋，只有用戶觸發(fā)了固定行為黎泣，偽類樣式才能立即加載恕刘。
語法：選擇器:偽類名 {屬性名:屬性值}

a 標簽的偽類

:link: 點擊之前的狀態(tài)
:visited: 點擊之后的狀態(tài)
:hover: 鼠標懸浮的狀態(tài)
:active: 鼠標點擊狀態(tài)
注意：1.想讓每個狀態(tài)都能正常加載，必須保證偽類的書寫順序是link抒倚，visited褐着，hover，active托呕。
    2.:hover偽元素不僅僅a標簽可以使用含蓉。其他標簽也可以使用。

背景定位

作用：設(shè)置不重復(fù)的圖片在背景區(qū)域開始加載的位置项郊。
語法：background-position：屬性值1馅扣，屬性值2；
屬性值：
    水平方向：left着降，center差油，right
    垂直方向：top，center任洞，bottom
    像素值表示：第一個屬性值表示水平方向移動的距離蓄喇，第二個屬性表示垂直方向移動的距離。
    百分比表示法：水平方向侈咕，等價于盒子的border以內(nèi)的背景區(qū)域?qū)捀邷p去圖片的寬度公罕。垂直方向等價于盒子的border以內(nèi)的背景區(qū)域高度減去圖片的高度。

背景附著 background-attachment

作用：設(shè)置背景圖片是否要隨著頁面或者盒子的滾動而滾動耀销。
語法：background-attachment: 屬性值;
屬性值：
    scroll：滾動的楼眷，表示背景圖片和頁面保持一個相對位置不變，隨著頁面的滾動而滾動熊尉。
    fixed：固定的罐柳。背景圖片的定位位置由原來的盒子變?yōu)闉g覽器左上角的頂點，不會隨著頁面的滾動而滾動狰住。

background 綜合寫法

可以有1-5個屬性值张吉，值之間用空格進行分隔，背景定位的兩個屬性值算作一個屬性值催植，不能被分開也不能顛倒順序肮蛹，五個屬性值之間可以互換位置。
語法：background: url() no-repeat center top fixed #000;
注意：1.如果屬性值沒有設(shè)置完全创南，那么沒有設(shè)置的屬性值會按照默認屬性值進行加載伦忠。
     2.如果想去層疊綜合屬性中的某一部分，其他屬性保持不變稿辙，最好使用單一屬性進行層疊昆码。

背景半透明

在css3中增加了背景半透明的語法，用rgba()來表示顏色。取值范圍在0-1之間赋咽，0表示完全透明旧噪，1表示不透明。
語法：background-color: rgba(0,0,0,.3)
注意：背景半透明是指盒子背景半透明脓匿，盒子內(nèi)容不受影響.
    2.rgba模式也可以應(yīng)用到字體半透明或者邊框半透明等場景淘钟。

背景縮放 background-size

概念：通過background-size設(shè)置背景圖片的寬度和高度，就像設(shè)置img標簽中圖片的寬度一樣陪毡，可以修改背景圖片的尺寸日月。
語法：background-size：width height;
屬性值：1.px值，當設(shè)置一個值的時候缤骨，垂直方向等比拉伸爱咬，當設(shè)置兩個值的時候，按照設(shè)置的兩個值加載绊起。
    2.百分比精拟，設(shè)置百分比時，參照盒子的寬高屬性虱歪。
    3.cover蜂绎，自動調(diào)整縮放比例，把背景圖片擴展到足夠大笋鄙，使背景圖片完全覆蓋背景區(qū)域师枣。如又溢出區(qū)域則會隱藏。
    4.contain萧落，自動調(diào)整縮放比例践美，把圖片擴展到最大尺寸，保證圖片始終在背景區(qū)域內(nèi)展示找岖。

多個背景圖

概念：在css3中可以添加多個背景圖片陨倡，background-img中的url用逗號隔開遵蚜。先添加的背景圖片在上面座哩，后添加的背景圖片在下面。
語法：background-img: url("test1.jpg"),url("test2.jpg")
注意：test1.jpg會壓在test2.jpg上面泊柬。

定位

定位的組成

定位：將盒子固定在某一位置蜜唾，所以定位也是在擺放盒子杂曲，按照定位的方式移動盒子。
定位 = 定位模式 + 邊偏移
定位模式用于指定一個元素在文檔中的定位方式袁余，邊偏移則決定了該元素的最終位置擎勘。

定位模式

定位模式通過css的position屬性設(shè)置的。
語法：position: 屬性值;
屬性值：static：靜態(tài)定位（默認方式）
    relative：相對定位
    absolute：絕對定位
    fixed：固定定位

邊偏移

邊偏移就是定位的盒子移動到最終位置泌霍，有top货抄，bottom，left朱转，right四個屬性蟹地，通常是兩兩組合，如top和left藤为，兩個邊就可以得到定位的位置怪与。可以設(shè)置負值缅疟。
語法：top：10px分别；
     left：10px
屬性：
    top：頂端偏移量，定義元素相對于其父元素上邊線的距離存淫。
    bottom：底部偏移量耘斩，定義元素相對于其父元素下邊線的距離。
    left：左側(cè)偏移量桅咆，定義元素相對于其父元素左邊線的距離括授。
    right：右側(cè)偏移量，定義元素相對于其父元素右邊線的距離岩饼。

相對定位 relative

概念：相對定位是元素在移動位置的時候荚虚，是相對于它原來的位置來說的。
語法：選擇器 {position: relative;}
特點：1.是相對于自己原來的位置移動的籍茧。
     2.原來在標準流的位置繼續(xù)占有版述，后面的盒子仍然以標準流的方式對待它。（不脫標寞冯，繼續(xù)保持原來的位置）

絕對定位 absolute

概念：絕對定位是元素在移動位置的時候渴析，是相對于它祖先元素來說的。
語法：選擇器 {position: absolute}
特點：1.如果沒有祖先元素或者祖先元素沒有定位吮龄，則以瀏覽器為準定位檬某。
     2.如果祖先元素有定位（相對，絕對螟蝙，固定定位）恢恼，則以最近一級的有定位的祖先元素作為參考點移動位置。
     3.絕對位置移動后不再占有原先的位置（脫標）胰默。

子絕父相

1.子級絕對定位场斑，不會占有位置，可以放到父盒子里面的任何一個地方牵署，不會影響其他的兄弟盒子漏隐。
2.父盒子需要加定位顯示盒子在父盒子內(nèi)顯示。
3.父盒子布局時奴迅，需要占有位置青责，因此父親只能是相對定位挺据。所以，相對定位經(jīng)常迎來作為絕對定位的父級脖隶。
總結(jié)：因為父級需要占有位置扁耐，因此是相對定位，子盒子不需要占有位置产阱，則是絕對定位婉称。

固定定位 fixed

概念：固定定位是元素固定于瀏覽器可視區(qū)的位置。主要使用場景：可以在瀏覽器頁面滾動時元素的位置不會改變构蹬。固定定位需要設(shè)置寬度王暗。
語法：選擇器 {position: fixed;}
特點：1.以瀏覽器的可視窗口為參照點移動元素。
     2.跟父元素沒有關(guān)系庄敛。
     3.不隨著滾動條的滾動而滾動俗壹。
     4.不占有原先的位置。

固定在版心右側(cè)位置

1.讓固定定位的盒子left：50%藻烤，走到瀏覽器可視區(qū)的一半位置策肝。
2.讓那個固定定位的盒子margin-left版心寬度一半的距離，多走版心寬度的一半位置就可以讓固定定位的盒子貼著版心右側(cè)對齊了隐绵。

壓蓋順序

定位元素不區(qū)分定位類型之众，都會去壓蓋標準流或者浮動的元素。如果都是定位元素依许，則根據(jù)書寫順序壓蓋棺禾，后寫的會壓蓋之前的。如果想設(shè)置壓蓋順序峭跳，可以自定義設(shè)置z-index屬性膘婶。
語法：z-index: number;
屬性值：默認是auto，可以設(shè)置數(shù)值蛀醉。
注意：z-index屬性值大的會壓蓋屬性值小的悬襟，設(shè)置z-index會壓蓋沒有設(shè)置z-index的。
    2.如果屬性值相同拯刁，還是會比較html的書寫順序脊岳，后寫的會壓蓋前寫的。
    3.只有設(shè)置定位的元素設(shè)置z-index屬性才有效果垛玻。
    4.兩組或者多組父子盒模型中割捅，如果父子盒子都進行了定位，且后寫的壓蓋了前寫的父子盒模型情況下：
        a.如果父盒子沒有設(shè)置z-index帚桩，則后寫父子盒模型的會壓蓋前寫的父子盒模型亿驾。如果父子盒模型設(shè)置了z-index屬性，則屬性大的壓蓋屬性小的账嚎。
        b.如果父盒子沒有設(shè)置z-index屬性莫瞬，子盒子設(shè)置了z-index屬性儡蔓，則屬性值大的子盒子會壓蓋屬性值小的子盒子，但是父盒子的壓蓋順序不會發(fā)生改變疼邀。如果父盒子設(shè)置了z-index屬性喂江，無論子盒子設(shè)置的index屬性有多大，都是父級盒子設(shè)置z-index屬性值大的壓蓋屬性值小的檩小。從父效應(yīng)。

css 鼠標樣式

語法：a {cursor: 屬性值}

css 鼠標樣式屬性值

字體圖標 icofont

1.使用場景：主要用于顯示網(wǎng)頁中通用烟勋，常用的一些小圖標规求。展示的是圖標，本質(zhì)屬于字體卵惦。

字體圖標的優(yōu)點

1.輕量級：一個圖標字體要比一系列的圖像要小阻肿，一旦字體加載了，圖標就會馬上渲染出來沮尿，減少了服務(wù)器請求丛塌。
2.靈活性：本質(zhì)其實是文字，可以很隨意的改變顏色畜疾，產(chǎn)生陰影赴邻，透明，旋轉(zhuǎn)等效果啡捶。
3.兼容性：幾乎支持所有的瀏覽器姥敛。

字體圖標的下載

1.icomoon字庫 http://icomoon.io
2.iconfont字庫 http://www.iconfont.cn/

字體圖標的使用

1.將解壓過后的fonts文件夾放到項目的根目錄里面；
2.聲明字體圖標(百度聲明方法或者參考京東商城)
3.復(fù)制fonts文件中demo.html頁面中的字體并粘貼到自己的代碼中瞎暑。
4.設(shè)置在css中聲明字體圖標彤敛，font-family。

聲明字體圖標代碼

@font-face {
    font-family: "icomoon";
    src: url("fonts/icomoon.eot?p4ssmb");
    src: url("fonts/icomoon.eot?p4ssmb#iefix") format("embedded-opentype"),
         url("fonts/icomoon,ttf?p4ssmb") format("truetype"),
         url("fonts/icomoon.woff?p4ssmb") format("woff"),
         url("fonts/icomoon.svg?p4ssmb#icomoon") format("svg");
    font-weght: normal;
    font-style: normal;
    font-display: block;
}

css 制作三角形

原理：根據(jù)邊框制作三角形了赌；

.box {
    width: 0;
    height: 0;
    line-height: 0;
    font-size: 0;
    border: 10px solid transparent;
    border-bottom-color: pink;

}