css样式

1. 字体样式(可以被继承)
        font-family:"微软雅黑","Microsoft YaHei","宋体",serif;
        font-size:12px;     字体大小
            浏览器默认字体为16px
        font-weight:bold;   字体粗细
            normal
            bolder
            100~900
        font-style:normal;  是否开启斜体
            italic
        line-height:2em; 行高【文本垂直居中】

        font:style weight size/line-height family;
            例如：italic bold 12px/2em 'Microsoft YaHei',serif

        网络字体
            主要用于字体图标库（iconfont/fontawesome）
        使用步骤：
            1) 在iconfont网站中选择图标，加入项目，产生代码
            2) 将产生的代码在html中通过link引用 http://at.alicdn.com/t/font_1328534_f3dyyeuoew.css    
            3) 应用css中定义好的类，来使用对应的图标

    2. 文本样式(可以被继承)
        color:#333;         字体颜色
        text-align:center   【文本水平居中】
        text-decoration-line
            underline
            line-through
            overline
            none
        text-decoration-style
            solid
            dotted
            double
            dashed
            wavy
            ...
        text-decoration-color
            颜色
        text-decoration:none;   字体装饰
        text-indent:2em;            文本缩进
        text-shadow:12px 2px 3px #ccc;

    3. 列表样式
        list-style-type
            circle
            square
            ...
        list-style-image
            url('')
        list-style-position
            outside
            inside
        list-style:none;

    4. 盒子样式(盒子，块元素)
        width
        height

        margin-top
        margin-right
        margin-bottom
        margin-left
        margin
            margin:10px;       上右下左   
            margin:0 10px; 上下为0，左右10px
            margin:0 5px 10px; 上0，左右5px，下10px
            margin:0 5px 10px 15px;     上右下左   

        border-top-style    边框线类型
        border-top-width    边框宽度
        border-top-color    边框线颜色
        border-top

        border-right-style 边框线类型
        border-right-width 边框宽度
        border-right-color 边框线颜色
        border-right

        border-bottom-style     边框线类型
        border-bottom-width     边框宽度
        border-bottom-color     边框线颜色
        border-bottom

        border-left-style   边框线类型
        border-left-width   边框宽度
        border-left-color   边框线颜色
        border-left

        border-color
        border-style
        border-width

        border:1px solid #ededed; 【*】

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

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

        border-radius   圆角半径

        background-origin   背景铺设的起点
            border-box      边框下
            padding-box     内边距下
            content-box     内容下
        background-image        背景图片
            url
        background-repeat   背景重复方式
            repeat-x
            repeat-y
            no-repeat
        background-color        背景颜色
            颜色
        background-position 背景位置
            center
            top left
            10px 20px
        background-clip         背景裁切方式
            border-box      边框下
            padding-box     内边距下
            content-box     内容下
        background                  速写
            background:url('') no-repeat center;
            background-size:cover;
            =>
            background:center/cover padding-box url('') no-repeat ;

        一个盒子的组成：
            外边距     margin
            边框        border
            内边距      padding
            内容        存放子元素或者内容的区域

            盒子所占面积？
            盒子存放内容的区域为多大?

        盒子计算方式
            box-sizing:content-box;内容盒子（传统盒子）
                width = 内容宽
                height = 内容高
                所占的宽 = border + padding + width
                所占的高 = border + padding + height


            box-sizing:border-box;边框盒子（怪异盒子）
                width = 边框以内所有的和
                width = border + padding + 内容宽

    5. 单位
        颜色
            #333333     => #333
            #ededed
            rgb(0,0,0) =>#000000
            rgba(0,0,0,0.3)
            渐变
        长度
            绝对单位
                px
            相对单位
                em      当前元素上的font-size的值
                   font-size:12px ;
                   1em = 12px;
                   2em = 24px;
                rem
                   html{font-size:14px}
                   1rem = 14px;
                %
                   width 相对于父元素
                   border-radius   相对于当前元素的width
                   ...
        关键
            center
            border-box
            content-box
        函数   
            url()
            rgb()
            rgba()

    6. 选择器优先级