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. 字体图标库（网页）
                
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 + 内容区域