很多,一定要掌握

css總結 

CSS總結
    css相關的屬性
        color
            文字的顏色
            取值
                關鍵字：red、pink
                rgb
                    每一項  0~255
                rgba
                    a透明度
                        0：完全透明
                        1：完全不透明
                        0.5：半透明
                        取值範圍是：0~1
                十六進位制
                    #
                    要麼是6位
                        #ffaabb
                    要麼是3位
                        #fab
        font-相關的屬性
            文字相關的屬性
            相關屬性
                font-size
                    字型的大小
                font-weight
                    字型的粗細
                        取值
                            關鍵字
                                加粗：bold
                                正常：normal
                            純數字
                                加粗：700
                                正常：400
                font-style
                    字型樣式
                        取值
                            italic
                                傾斜
                            normal
                                正常
                font-family
                    字型的型別
            font-相關屬性的連寫形式
                swsf
                    font：style  weight  size  family
                注意覆蓋的問題
                    單獨寫的樣式寫在連寫的後面
                連寫的完整版
                    font：style  weight  size/line-height  family
            省略問題
                可以省略前兩個
        background-相關屬性
            背景相關的屬性
            相關屬性
                background-color
                    背景顏色
                background-image
                    背景圖片
                    預設是平鋪效果
                background-repeat
                    背景是否平鋪
                        repeat
                            平鋪
                        no-repeat
                            不平鋪
                        repeat-x
                            x軸平鋪
                        repeat-y
                            y軸平鋪
                background-position
                    背景圖片的位置
                        取值
                            關鍵字
                                水平方向
                                    left center  right 
                                垂直方向
                                    top  center  bottom
                            px
                            混用
                                50px  center
                                    x軸50px  垂直方向居中
                background-size
                    設定背景圖片的大小
                        取值
                            第一個值
                                背景圖片的寬度
                                    數字+px
                                    100%：表示就是當前盒子的寬度
                            第二個值
                                背景圖片的高度
                                    數字+px
                                    100%：表示就是當前盒子的高度
            background-相關的屬性的連寫形式
                background：color  image  repeat  position
            覆蓋問題
                單獨寫的樣式寫在連寫的後面
        text-相關屬性
            文字相關屬性
            相關屬性
                text-indent
                    首行縮排
                        首行縮排兩個字元
                            2em
                                1em=font-size
                            px
                text-decoration
                    文字的修飾
                        取值
                            none
                                無（沒有修飾）
                                 一般用於清除a標籤的下劃線
                            underline
                                下劃線
                            line-through
                                刪除線
                text-align
                    文字的對齊方式（水平方向）
                        取值
                            left
                            center
                                水平居中
                            right
        line-height
            行高
            定義：兩行文字基線之間的距離
            作用：讓文字垂直居中
                line-height：標籤的高度
            取值
                數字+px
                數字+em
                    1em=font-size
                    瀏覽器預設文字大小：16px
                百分比
                    百分比*font-size
                單純的數字（倍數）
                    倍數*font-size
        vertical-align
            垂直對齊方式
            作用：處理行內塊元素對齊方式的問題
                一般只會給行內塊元素設定
            取值
                top
                middle
                bottom
                baseline
        overflow
            設定內容溢位部分的樣式
            取值
                visible
                    超出不隱藏
                hidden
                    超出隱藏
                scroll
                    滾動條
                        缺點：無論內容是否超出，都有滾動條
                auto    
                    根據內容的多少自動顯示或者隱藏滾動條
        border-radius
            邊框圓角
            常見的使用
                1、畫一個圓
                    盒子是正方形
                    設定border-radius：50%；
                2、膠囊按鈕
                    盒子是一個矩形
                    設定border-radius：盒子的高度一半；
        cursor
            滑鼠樣式
            取值
                default
                    預設的箭頭樣式
                pointer
                    小手的樣式
                text
                    工字型
    居中方法總結
        水平居中
            text-align：center
                文字
                行內元素
                    span  a
                行內塊元素
                    img、input
            margin：0 auto
                標準流中的塊級元素
        垂直居中
            line-height：標籤的高度
                文字
                行內元素
                    span  a
                行內塊元素
                    input
                    img
                        需要單獨給img標籤設定vertical-align：middle
            定位
                1、子絕父相
                2、top：50%；
                3、transform：translateY（-50%）；
                讓塊級元素垂直居中
    選擇器
        作用：找到頁面中的標籤，設定樣式
        基本選擇器
            標籤選擇器
                標籤名 {}
                通過標籤名，找到頁面中所有符合的標籤
                    一類
            類選擇器
                .類名 {}
                通過類名，找到頁面中所有帶有這個類名的標籤
                注意點:
                    一個標籤可以設定多個類名
                    一個類選擇器可以選中多個標籤
                    多對多
            id選擇器
                #id屬性{}
                通過id屬性，找到頁面中帶有這個id的標籤
                注意點
                    一個標籤只能有一個id屬性
                    一個id選擇器只能選中一個標籤
                    一對一
                id相當於身份證號碼，在一個頁面中是唯一的，不能重複的！！！！
        複雜選擇器
            萬用字元
                * {}
                找到頁面中所有的標籤，設定樣式
                效率低  耗效能
            並集選擇器
                選擇器1，選擇器2 {}
                找到選擇器1和選擇器2選中的標籤設定樣式
                注意點:
                    並集選擇器可以同時寫多個選擇器，選擇器之間用逗號隔開！！
            交集選擇器
                選擇器1選擇器2 {}
                既又原則
                    既符合選擇器1又符合選擇器2的標籤設定樣式
                注意點
                    交集選擇器中可以寫多個選擇器，但是選擇器與選擇器之間是緊挨著的！！！！
                    如果多個選擇器之間有標籤選擇器，必須寫在最前面
            後代選擇器
                選擇器1 選擇器2 {}
                在選擇器1選中標籤的後代（兒子、孫子、重孫子....）中，找到符合選擇器2的標籤，設定樣式
            子代選擇器
                選擇器1>選擇器2 {}
                在選擇器1選中標籤的子代（兒子），找到符合選擇器2的標籤，設定樣式
        連結偽類選擇器
            選擇的不僅僅是標籤，而是標籤的某種狀態
            a:link
                連結未點選時的狀態
            a:visited
                連結訪問之後的狀態
            a:hover
                滑鼠懸停時的狀態
                    可以用在其他元素
            a:active
                滑鼠按下的狀態
            書寫順序
                lvha
        結構偽類選擇器
            作用：通過標籤的html結構關係，找到對應的標籤
            常見的情況
                li:first-child {}
                    1、找到頁面中所有的li
                    2、找到li的父元素
                    3、找到父元素的第一個子元素
                    4、判斷第一個子元素是否是li
                        是
                            加樣式
                        不是
                            不加樣式
                li:last-child {}
                    1、找到頁面中所有的li
                    2、找到li的父元素
                    3、找到父元素的最後一個子元素
                    4、判斷最後一個子元素是否是li
                        是
                            加樣式
                        不是
                            不加樣式
                li:nth-child（數字）
                    找到偶數個
                        2n
                    找到奇數個
                        2n+1/2n-1
                    找到前12個
                        -n+12
        屬性選擇器
            作用：通過標籤的屬性找到對應的標籤
            結構：標籤名[屬性名=“屬性值”] {css樣式}
            常用的情況
                input[type='text'] {}
                    找到頁面中所有的文字框
                input[type='button'] {}
                    找到頁面中所有的表單按鈕
    css的書寫位置（css的三種引入方式）
        內嵌樣式
            書寫位置
                css寫在style標籤裡面
                style標籤可以寫在任意位置，但是規範最好寫在title標籤下面
            作用範圍
                當前頁面
            應用場景
                小案例、小demo
        行內樣式
            書寫位置
                css寫在標籤的style屬性中
            作用範圍
                當前標籤
            應用的場景
                基礎班不用，之後js操作的樣式都是行內樣式
        外聯樣式
            書寫位置
                單獨的css檔案中，如果要使用通過link標籤引入
            作用範圍
                多個頁面（誰引入誰生效）
            應用場景
                專案中用的最多
    css的三大特性
        繼承性
            子元素有預設繼承父元素樣式的效果
            哪些屬性可以繼承？（記憶方法）
                color
                text-
                font-
                line-
            不能繼承的特殊情況
                a標籤的顏色不能繼承
                    其實是繼承下來了，但是被瀏覽器預設設定的樣式給覆蓋掉了
                h系列的font-size不能繼承
                    其實是繼承下來了，但是被瀏覽器預設設定的樣式給覆蓋掉了
                塊級元素有預設繼承父盒子寬度的效果
                    其實並不是繼承，只是因為獨佔一行的效果
                如果子元素自己有樣式（自己設定、瀏覽器預設加的），都不會問父元素要
        層疊性
            層疊的樣式不同時，樣式會疊加
                共同作用在標籤上
            層疊的樣式相同時，樣式會覆蓋
                寫在下面的樣式生效！！！
        優先順序
            公式
                繼承<萬用字元<標籤選擇器<類選擇器<id選擇器<行內樣式<!important
                注意點
                    !important不能提升繼承的優先順序
                        繼承永遠是繼承，優先順序最低！！
                    !important書寫位置
                        font-size：100px !important ；
                    !important只能提升單個樣式的優先順序
                        不能提升選擇器的優先順序
            權重（應付複合選擇器）
                計算公式
                    0000
                    第一級表示行內樣式的個數
                    第二級表示id選擇器的個數
                    第三級表示類選擇器的個數
                    第四級表示標籤選擇器的個數
                    !important優先順序最高！！！！！！
    元素的三種顯示方式
        塊級元素
            display：block
            特點
                獨佔一行
                寬度預設繼承父元素的寬度
                高度預設由內容撐開（自適應）
                可以設定寬高
            代表標籤
                div、h、p
        行內元素
            display：inline
            特點
                一行顯示多個
                寬度和高度預設由內容撐開
                不可以設定寬高
            代表標籤
                span  a
                偽元素預設顯示行內元素
        行內塊元素
            dispaly：inline-block
            特點
                一行顯示多個
                可以設定寬高
            代表標籤
                input  img
        三種顯示方式的轉換
            display：block/inline/inline-block
    盒子模型
        四個部分組成
            內容：content
            內邊距：padding
                盒子邊框與內容之間的距離
            邊框：border
            外邊距：margin
                盒子與盒子之間的距離
        具體每個部分的組成
            border：邊框
                屬性
                    border-width
                        邊框的粗細
                    border-style
                        邊框的樣式
                            solid 實線
                            dashed  虛線
                            dotted 點線
                    border-color
                        邊框的顏色
                連寫
                    border：width  style  color
                    快捷鍵：bd+
                給單方向設定邊框
                    border+方位名詞
                去除邊框：border：none；
            padding：內邊距
                表示：邊框與內容之間的距離
                取值
                    一個值
                        上下左右
                    兩個、三個、四個
                        從上開始賦值  順時針賦值，如果沒有設定的  看對面的！！！
                給單方向設定padding
                    padding+方位名詞
                盒子大小的計算公式
                    盒子的寬度=左border+左padding+內容的寬度+右padding+右border
                    盒子實際大小的組成部分
                        內容
                            width/height
                        內邊距
                            padding
                        邊框
                            border
                    設定盒子的大小
                        手動內減
                            自己計算,多出的部分在內容中減去
                        自動內減
                            box-sizing：border-box
            margin：外邊距
                表示：盒子與盒子之間的距離
                取值
                    一個值
                        上下左右
                    兩個、三個、四個
                        從上開始賦值  順時針賦值，如果沒有設定的  看對面的！！！
                給單方向設定margin
                    margin+方位名詞
                margin的單方向應用
                    上下的margin
                        margin-top
                            讓盒子往下移動
                        margin-bottom
                            讓下面的盒子往下移動
                    左右的margin
                        margin-left
                            讓盒子往右移動
                        margin-right
                            讓右邊的盒子往右移動
    margin的特殊現象
        margin的合併現象
            水平方向：左右margin會疊加
                兩者之間的距離為margin的和
            垂直方向：上下的margin會合並
                取兩者之間margin的最大值！！！
        margin的塌陷現象
            現象是什麼？
                兩個塊級元素巢狀，如果給子盒子設定margin-top  父盒子會一起往下移動！！！
            解決方法
                給父盒子設定border-top
                給父盒子設定padding-top
                給父盒子設定overflow：hidden
                    觸發了BFC
                        塊級格式化上下文
                給父盒子設定浮動
                把父盒子轉換成行內塊
    浮動
        浮動的作用
            現在的作用：讓垂直佈局的盒子變成水平佈局（一個左，一個右）
            最開始：圖文環繞
        屬性
            float：left
                左浮動
            float：right
                右浮動
        特點
            浮動的元素會脫離標準流（脫標）
                飄起來了（不佔位置）
                    比標準流高半個級別
            浮動找浮動
                浮動的元素受到邊界的影響
            浮動之後的元素會有類似於行內塊的效果
                一行可以顯示多個
                可以設定寬度
            其實浮動元素只能覆蓋標準流中的塊級元素（會把文字、行內塊.....擠到一邊去）
        清除浮動
            為什麼要清除浮動？？？
                清除浮動帶來的影響
                    浮動之後的元素不能撐開父元素（脫標），父元素的高度就為0，就會影響之後的佈局
            如何清除浮動
                額外標籤法
                    1、在父元素裡面的最後新增一個塊級元素
                    2、給新增的塊級元素設定清除浮動的核心程式碼
                        clear：both
                    缺點：在頁面中添加了多餘的標籤，影響頁面的結構不清晰
                偽元素清除法
                    本質上原理和額外標籤一樣，新增的是偽元素
                    偽元素：由css新增的元素
                    常用的偽元素
                        ::before
                            ...之前
                        ::after
                            ...之後
                    偽元素清除法的程式碼
                給父元素設定overflow:hidden
                    觸發了BFC
                直接給父元素設定高度
    定位
        靜態定位
            position：static
            不能通過配合方位屬性使用！！！
        相對定位
            position：relative
            特點
                相對於自己原來的位置進行移動
                佔位置：沒有脫標
        絕對定位
            position：absolute
            特點
                相對於
                    預設相對於瀏覽器進行移動
                    如果父元素有定位（相對、絕對、固定）,相對於有定位的父元素進行移動
                不佔位置：脫標了
            子絕父相
                子元素絕對定位
                父元素相對定位
                應用
                    讓塊級元素水平居中
                        1、子絕父相
                        2、left：50%；
                        3、transform：translateX（-50%）；
                    讓塊級元素水平居中都居中
                        1、子絕父相
                        2、left：50%；
                        3、top：50%；
                        4、transform：translate（-50%，-50%）；
        固定定位
            position：fixed
            特點
                永遠相對於瀏覽器進行移動
                不佔位置：脫標
        注意點：脫標之後的元素寬度預設由內容撐開！！！
    層級關係
        標準流<浮動<定位
        三種定位之間層級關係預設一樣，寫在下面的可以覆蓋上面的
        如果要手動設定定位元素的層級
            z-index：整數；
            數字越大，層級越高！！！
    css的三種隱藏方式
        overflow：hidden
            內容超出部分隱藏
                是讓超出的內容隱藏！！！不是讓的元素隱藏！！！
        visibility：hidden
            元素隱藏，頁面中看不見
                佔位置！！！！
        display：none
            元素隱藏，頁面中看不見
                不佔位置！！！
    巢狀的特殊情況
        p標籤不能巢狀div
            會把p標籤解析成兩個
        a標籤不能巢狀a標籤
            也會解析成兩個並列的a標籤
    精靈圖
        精靈圖的作用（好處）
            減輕伺服器的請求次數，減輕伺服器的壓力
        使用
            1、新建一個盒子
            2、通過ps量取精靈圖中小圖片的大小  設定盒子
            3、將精靈圖設定為盒子的背景圖片
            4、通過background-position：來設定背景圖片的位置   x和y的值 都是負數
        注意：精靈圖本質上就是一個盒子（div）設定背景圖片，不能使用img標籤做！！
    字型圖示
        字型圖示的作用
            可以減輕伺服器的壓力
            字型圖示本質上文字，通過css設定字型圖示的顏色、大小、樣式
            字型圖示放大不會失真！！！
        使用：
            下載
            開啟demo_fontclass.html說明書
            根據說明書的步驟  去使用！！！
                1、引入iconfont.css這個檔案
                2、在頁面中寫入i標籤 新增對應的類名即可！！