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

規則取值：

        關鍵字：
            位置 left right center top bottom medium
            取消    none
        顏色：
            十六進制    #ffffff #ededed,簡寫為#fff
            rgb函數    rgb(0,0,0)
            關鍵字
            漸變色     linear-gradient
        長度：
            絕對單位     px 
            相對單位 
                em     當前元素上的字體大小
                    font-size:12px 
                    1em = 12px
                    2em = 24px
                rem 當前html元素中設定的字體大小
                    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         大小
            網頁默認字體為16px
            12px 10px
        font-weight     粗細
            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"

        網絡字體
            奇葩字體，（字 -> 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"
            }

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


        字體圖標庫(第三方庫)
            iconfont     / fontawesome(拓展)
            使用方法：
            1) 在iconfont官網中選擇要使用的圖標，放入到購物車中
            2) 下載源碼到本地
            3) 本地引用iconfont.css文件
            4) 應用樣式即可
                
    文本樣式 (可以被繼承)
        text-align     文本在容器中的排列方式
            left
            right
            center
        text-indent 文本在容器中的縮進
            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
            盒子上下外邊距不會合并，比如，第一個元素margin-bottom:20px;第二個元素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     背景起點
            border-box
            padding-box
            content-box
        background-clip         對已經鋪好的背景裁切
            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) 盒子模型
            內容盒子 （width = 內容寬）【傳統盒子】
                是絕大多數瀏覽器的默認盒子模型
                width : 100px
                表示內容區域的寬為100px

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