css學習day05

規則取值：

關鍵字：
            位置 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. 字體圖標庫（網頁）
                <div>hello</div>


        字體圖標庫(第三方庫)
            iconfont     / fontawesome(拓展)
            使用方法：
            1) 在iconfont官網中選擇要使用的圖標，放入到購物車中
            2) 下載源碼到本地
            3) 本地引用iconfont.css文件
            4) 應用樣式便可
                <i class="iconfont icon-xxx"></i>
    文本樣式 (能夠被繼承)
        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 + 內容區域