摘要：規(guī)則取值關(guān)鍵字位置取消顏色十六進(jìn)制簡寫為函數(shù)關(guān)鍵字漸變色長度絕對單位相對單位當(dāng)前元素上的字體大小當(dāng)前元素中設(shè)定的字體大小百分比字體樣式可以被繼承族微軟雅黑宋體字體棧微軟雅黑大小網(wǎng)頁默認(rèn)字體為粗細(xì)是否打開斜體速寫，簡寫

規(guī)則取值：

        關(guān)鍵字：
            位置 left right center top bottom medium
            取消    none
        顏色：
            十六進(jìn)制    #ffffff #ededed,簡寫為#fff
            rgb函數(shù)    rgb(0,0,0)
            關(guān)鍵字
            漸變色     linear-gradient
        長度：
            絕對單位     px 
            相對單位 
                em     當(dāng)前元素上的字體大小
                    font-size:12px 
                    1em = 12px
                    2em = 24px
                rem 當(dāng)前html元素中設(shè)定的字體大小
                    html {
                        font-size:10px;
                    }

                    ul {
                        font-size:20px;
                    }
                    li {
                        height:2rem;     //20px
                    }
                % 百分比
                    border-radius:50%

    
    字體樣式 (可以被繼承)
        color
        font-family     族
            "微軟雅黑" ,"Microsoft YaHei","宋體"
            字體棧

            font-family:"微軟雅黑","Microsoft YaHei",serif;

        font-size         大小
            網(wǎng)頁默認(rèn)字體為16px
            12px 10px
        font-weight     粗細(xì)
            bold
            thin
            bolder
            100~900 
        font-style     是否打開斜體
        line-height 

        font:
        速寫，簡寫
        font: font-style font-weight font-size/line-height font-family

        font:normal bold 14px/1.5em "微軟雅黑","Microsoft YaHei"

        網(wǎng)絡(luò)字體
            奇葩字體，（字 -> icon）
            @font-face {
                font-family: "iconfont";
              src: url("iconfont.eot?t=1564624596715"); /* IE9 */
              src: url("iconfont.eot?t=1564624596715#iefix") format("embedded-opentype"), /* IE6-IE8 */
              url("data:application/x-font-woff2;charset=utf-8;base64,=") format("woff2"),
              url("iconfont.woff?t=1564624596715") format("woff"),
              url("iconfont.ttf?t=1564624596715") format("truetype"), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
              url("iconfont.svg?t=1564624596715#iconfont") format("svg"); /* iOS 4.1- */
            }

            .lishiziti {
                font-family:"iconfont"
            }
            .weixin:before {
                content:"e123"
            }

        圖標(biāo)：
            1. 將圖標(biāo)從設(shè)計(jì)圖中切割下來，當(dāng)做圖片使用(小程序)
                缺點(diǎn)：放大與縮小比較麻煩，失真；無法更換顏色
            2. 字體圖標(biāo)庫（網(wǎng)頁）
                
hello


        字體圖標(biāo)庫(第三方庫)
            iconfont     / fontawesome(拓展)
            使用方法：
            1) 在iconfont官網(wǎng)中選擇要使用的圖標(biāo)，放入到購物車中
            2) 下載源碼到本地
            3) 本地引用iconfont.css文件
            4) 應(yīng)用樣式即可
                
    文本樣式 (可以被繼承)
        text-align     文本在容器中的排列方式
            left
            right
            center
        text-indent 文本在容器中的縮進(jìn)
            2em
        text-decoration-line     文本裝飾線的位置
            none
            underline
            overline
            line-through
        text-decoration-style 文本裝飾線的類型
            solid
            double
            dotted
            dashed
            wavy
        text-decoration-color 文本裝飾線的顏色
        text-decoration     以上速寫形式
        text-shadow     文本的陰影
            left top c color;

    列表樣式
        list-style-type
            circle/quare/...
        list-style-image
            url()
        list-style-position
            inside/outside

        list-style:none    【*】

    盒子樣式（塊元素）
        width
        height
        margin
            盒子上下外邊距不會合并，比如，第一個(gè)元素margin-bottom:20px;第二個(gè)元素margin-top:10px;他們的外邊距為20px

            margin-top
            margin-right
            margin-bottom
            margin-left

            margin:10px;             上右下左都為10px
            margin:0 10px;        上下為0，左右為10px
            margin:0 5px 10px;上0，下10px     左右5px
            margin:5px 10px 15px 20px     上右下左

        padding
            padding-top
            padding-right
            padding-bottom
            padding-left

            padding:10px;             上右下左都為10px
            padding:0 10px;        上下為0，左右為10px
            padding:0 5px 10px;上0，下10px     左右5px
            padding:5px 10px 15px 20px     上右下左

        border
            border-top-width
            border-right-width
            border-bottom-width
            border-left-width
            border-width

            border-top-style
            border-right-style
            border-bottom-style
            border-left-style
            border-style

            border-top-color
            border-right-color
            border-bottom-color
            border-left-color
            border-color

            border:1px solid #ededed;

        border-radius

        box-shadow
            box-shadow:5px 5px 10px #ccc;
            box-shadow:inset 0px 0 3px lightblue;


        background-origin     背景起點(diǎn)
            border-box
            padding-box
            content-box
        background-clip         對已經(jīng)鋪好的背景裁切
            border-box
            padding-box
            content-box
        background-image
            url()
        background-color
            顏色
        background-position
            位置
                center
                left top 
                100px 50px
        background-repeat
            repeat-x
            repeat-y
            no-repeat
        background
            background:url("") no-repeat center;
            background:center/cover padding-box url("./image/lianjia_08.png") no-repeat ;


        1) 盒子模型
            內(nèi)容盒子 （width = 內(nèi)容寬）【傳統(tǒng)盒子】
                是絕大多數(shù)瀏覽器的默認(rèn)盒子模型
                width : 100px
                表示內(nèi)容區(qū)域的寬為100px

            邊框盒子 （width = 邊框以內(nèi)所有元素寬）【怪異盒子】
                width : 100px;
                表示邊框以內(nèi)所有的寬的綜合
                width = border + padding + 內(nèi)容區(qū)域