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 + 内容区域