css与css3经常用到的属性

一、字体
1、字体属性
    font-style:italic(倾斜)、normal(正常，默认的);
    font-weight:bold(加粗)、bolder(比加粗还粗，但字体有极限，到达最粗就不会变的再粗了)、lighter(细线，默认就是细的);
    font-size:30px;
    font-family:"宋体","Times New Roman","楷体";(默认宋体,多个字体取电脑中有的靠前的)
    //给中文设置一个字体，给英文设置另一个字体（英文字体都不会处理中文字体，中文字体可以处理英文字体）
    font-family:"Times New Roman","楷体";//这样英文检测到第一个能处理自己就用第一个，中文检测第一个处理不了就会使用第二个
2、字体属性简写(一个属性"font"后面写多个属性)
    font: style weight size family;//style、weight都可以省略，也可以交换位置，size一定要在family之前，并且这两个属性不能省略




二、文本
1、文本属性
    text-decoration:underline(下划线)、line-through(删除线)、overline(上划线)、none(默认，什么都没有);
    text-align:left、center、right;
    text-indent:2em;(缩进2个文字，1个em代表一个文字的宽度;也可以设置像素px,但不同分辨率不好搞，一般就用em)
2、颜色
    color:red、#fff、rgb(255,0,0)、rgba(255,0,0,1)
    16进制与10进制转换公式：16进制第一位*16 + 16进制第二位 = 10进制 (此公式仅用于颜色值)




三、选择器
//css2
1、标签选择器p{}
2、id选择器 #test{} //能不用则不用，一般id给js用的
3、类选择器 .test{}
4、后代选择器 div p{} //div下面的所有p标签，子代、孙子、重孙
              div>p{} //div子代选择器，非孙子、重孙标签
5、交集选择器 p.test{} //p标签上class为test的对象
6、并集选择器 p,div{}//p和div都会有此样式
7、子集第一个选择器 div+p{} //div下面第一个p <div><p>1</p><p>1</p></div>
8、相邻兄弟选择器 div~p{} //div后面所有p标签<div></div><p></p><p></p>
//css3
<h1>11</h1>
<p>222</p>
<p>333</p>
<div>
    <p>444</p>
    <p>555</p>
</div>
9、同级别的第一个 p:first-child{}//同级别并且第一个标签为p的被选中,222被选中（由于div同级第一个标签为h1不是p标签，所以不被选中,如果h1也是p，就被选中）
10、同级别最后一个 p:last-child{}//同级别并且最后一个为p标签被选中,555被选中（由于div同一级别最后一个为div标签不是p标签,所以不被选中,如果div是p,就被选中）
11、同级别当中第2个 p:nth-child(2){}//同级别并且第2个为p标签被选中(类似9) 222与555
12、同级别倒数第2个 p:nth-last-child(2){}//同级别并且倒数第2个为p标签被选中(类似9) 444与222
13、同类型的第一个 p:first-of-type{} //同级别同类型(p标签)第一个，222、444被选中
14、同类型最后一个 p:last-of-type{} //同级别同类型(p标签)最后一个，333、555被选中
15、同级别当中同类型第2个p:nth-of-type(2){}//同级别中同类型(p标签)的第2个，333、555被选中
16、同级别当中同类型第2个p:nth-last-of-type(2){}//同级别中同类型(p标签)的倒数第2个，444、222被选中
17、选中父元素中唯一的子元素 p:only-child{}// p作为子标签，并且是唯一一个子元素<div><p>111</p></div>,如果div中多了一个标签，p就不会被选中
18、选中父元素中唯一的唯一类型的子元素 p:only-of-type{} //p作为子标签，并且是唯一一个唯一类型的子元素<div><p>11</p><h1>222</h1></div>,如果h1是p，或者div中多个p就不会被选中
19、奇数选择器 p:nth-child(odd){} //默认从第一个开始记数1、3、5.。(jquery不一样,jquery默认从第0个开始计数) p:nth-of-type(odd){}
20、偶数选择器 p:nth-child(even){}默认从第一个开始记数2、4、6.。(jquery不一样,jquery默认从第0个开始计数) p:nth-of-type(even){}
21、计数器选择器 p:nth-child(xn+y){} //x,y是变量,n(n从0开始),所以奇数可以表示为2n+1,偶数可以表示为2n+0
22、属性选择器
                p[id],p标签有id属性的
                p[class="test"],p标签有class属性的,并且class为test
                p[class^="test"],p标签有class属性，并且class属性值是以test开头的
                p[class$="test"],p标签有class属性,并且class属性值是以test结尾的
                p[class*="test"],p标签有class属性，并且class属性值是包含test的
23、通配符选择器 *{} 界面上所有的标签




四、css三大特性
1、继承性:父元素设置的属性，所有后代元素也能用
          注意点：A、只有color-/text-/font-/line-开头的属性，才有继承性
                  B、a标签的文字颜色和下划线是不会继承父类的
                  C、h标签的文字大小是不会继承父类的（网上这样说，但是自己实践是可以集继承的，带研究）


          应用场景:一般设置网页公用属性
2、层叠性:某一个选择器属性,把另外的一个选择器属性覆盖掉，层叠掉的
3、优先级：
        A、间接继承：eg:<div><ul><li></li></ul></div> ,ul与div都有颜色，li离ul近所以会继承ul的，不会继承div的
        B、直接:相同选择器离标签近的、不同选择器id>class>标签>通配符>继承>浏览器
        C、important: 只能用于直接选中的标签选择器中，不能用于间接选中,即优先级不能被继承，只能提升被选定的属性优先级，其他属性不能被提升。优先级最大 p{color:red !important};
        D、权重:多个选择器混在一起用,判断谁的优先级高
                a、首先计算计算器中有多少id，id选择器多的优先级最高
                b、若id一样多，再计算计算器中有多少类名，类名多优先级高
                c、若id、类名一样多，看谁的标签名多,标签名多的优先级高
                d、若id、类名、标签一样多，此时就不会往下计算了,谁写在后面听谁的




五、div、span
    1、div：一般配合css用于网页布局
    2、span:修改局部信息样式
    3、div与span区别：
                    a、div会单独一行(块元素)，span不会单独占一行(行内元素)
                    b、div是容器级别的标签，span是文本级别标签
    4、容器级标签与文本级标签区别:
                    a、容器级可以嵌套任何标签(div、ul、ol、dl、dt、dd、h、li...)
                    b、文本及只能嵌套文字、超链接、图片(span、p、strong、em、del....)，一定不能嵌套容器及，否则html解析结构会出错




六、行内元素、块状元素：所有容器级标签都是块状元素，所有文本级元素除了p都是行内元素，p是块级元素
        二者区别：
                1、块级(block)：
                    a、块状元素独占一行，
                    b、 没有设置宽度,块元素默认与父元素一样宽度
                2、行内(inline)：
                    a、行内元素不会独占一行
                    b、行内元素不能设置高度、宽度的
                3、行内块级(inline-block),img标签、表单标签：
                    a、不独占一行
                    b、可以设置宽度、高度




七、背景(background)
    1、background-color:red、16进制、rgb、rgba(第四个参数是透明度0~1); //设置标签背景颜色
    2、background-image:url() ;//设置标签背景图片,图片跟背景色可以共存，但是背景图会盖住背景色
            注意点:1、可以设置本地图片(images/girls.jpg)、网络图片(http://www.baidu.com/test.jpg)  //括号内都不需要引号
                   2、如果图片没有标签范围大,会在标签水平、垂直方向平铺
    3、background-repeat:repeat(默认，水平、垂直都平铺) 、no-repeat(不平铺)、repeat-x(水平方向平铺)、repeat-y(垂直方向repeat)
    4、background-position: 水平方向 垂直方向;//控制背景图位置
            background-position:left top;//左上角 ,right、bottom、center、 10px(一定要写单位，否则无效)、-10px、0px(左上角为0,0点)


            应用场景：网站横幅中间核心内容,两边不重要，无论浏览器多大让中间内容始终在中间,就用定位背景实现
                    background-position:center top;
    5、背景关联方式：默认情况下背景会随着滚动条滚动而滚动,如果不想让背景随着滚动条滚动而滚动,我们就可以修改背景图标跟滚动条的关联方式
        background-attchment:scroll(默认,随着滚动条滚动)、fixed(不随着滚动条滚动)
    6、背景缩写: background:背景颜色 背景图片 平铺方式 关联方式 定位方式;
            注意点:
                  任何一个位置上的属性都可以省略不写
            复杂方式:
                    div{
                        height:200px;
                        background-color:#fff;
                        background-image:url(images/test.jpg);
                        background-repeat:no-repeat;
                        background-position:left top;
                    }
            缩写方式:
                    div{
                        background:#fff images/test.jpg no-repeat scroll left top;
                    }
    7、背景图片(background)与插入图片(img)区别
            A、背景图不占位置，仅仅是一个装饰，输入内容在背景图上显示
               插入图片会占用位置，插入内容在图片后面显示
            B、背景图有定位属性，可以方便控制位置
               插入图片没有定位属性，控制位置不太方便
            C、插入图片语义比背景图片语义强，如果图片想被搜索引擎抓取就用插入


    练习：一张大图片，上面有个小图片，小图片在大图片中下方
            a、给大图片div 一个宽、高、背景图
            b、在大图div中在定义一个div作为小图，宽高跟大图一样，背景图定位 center bottom
    举一反三：所有图片堆叠出来的效果都是div嵌套，宽高一样，调整背景图位置而来的




  8、背景精灵技术：将多张小图片拼凑成一张大图片，然后用背景位置调整获取想要的背景小图标




八、边框：环绕在标签宽度、高度周围的线条
        连写:
            a：border:边框宽度 边框样式 边框颜色; //上下左右都有边框
            b：border-top:边框宽度 边框样式 边框颜色; //上有边框
            c：border-right:边框宽度 边框样式 边框颜色; //右有边框
            d：border-bottom:边框宽度 边框样式 边框颜色; //下有边框
            e：border-left:边框宽度 边框样式 边框颜色; //左有边框


        分开写：
            a(4个参数)：
            border-width: 上 右 下 左
            border-color: 上 右 下 左
            border-style: 上 右 下 左


            b(3个参数)：
            border-width: 上 左右 下
            border-color: 上 左右 下
            border-style: 上 左右 下


            c(2个参数)：
            border-width: 上下 左右
            border-color: 上下 左右
            border-style: 上下 左右


            d(1个参数)：
            border-width: 上右下左
            border-color: 上右下左
            border-style: 上右下左


            border-top-width: 10px;//只设置上
            .....同理其他
            border-bottom-width:10px;//只设置下
            .....同理其他
            border-left-width: 10px;//只设置左
            .....同理其他
            border-right-width: 10px;//只设置右
            .....同理其他


        练习：利用边框画倒三角
                div{
                    height: 0px;
                    width: 0px;
                    border-top: 20px solid red;
                    border-right: 20px solid #fff;
                    border-bottom: 20px solid #fff;
                    border-left: 20px solid #fff;
                 }


九、内边距(padding):边框和内容之间的距离
        连写:
            padding:上 右 下 左
            padding:上 右左 下
            padding:上下 右左
            padding:上下右左
        非连写:
            padding-top: 10px;
            padding-right: 10px;
            padding-bottom:10px;
            padding-left:10px;


        注意:
            a、设置完内边距,标签高度宽度会发生变化(高度=原高度+pading-top/padding-bottom,宽度=原宽度+padding-left/right)
            b、内边距也会有背景颜色
            c、系统会默认给页面标签外边距、内边距，开发之前就应该给清0  (百度yui css)
            d、测量时候左右边距相同，以左边距为主,右边距有误差(盒子存储文字)


十、外边距(margin):标签之间的距离
       1、写法
        连写:
            margin:上 右 下 左
            margin:上 右左 下
            margin:上下 右左
            margin:上下右左
        非连写:
            margin-top:10px;
            margin-right:10px;
            margin-bottom:10px;
            margin-left:10px;


        注意:
            a、标签与标签回车，就是一个空格,所以上下两行标签默认之间会有个空格,那个不是margin
            b、外边距那一部分没有背景颜色
            c、如果两个盒子嵌套，大盒子套小盒子,给其中任意一个设置margin-top，两个盒子都会定下来,如果想大盒子不顶下来,只顶小盒子下来,那么可以给大盒子设置一个边框就可以了
            d、嵌套盒子可以使用“margin:0 auto”，使里面小盒子在水平方向居中
            e、系统会默认给页面标签外边距、内边距，开发之前就应该给清0  (百度yui css)




        2、外边距合并
                水平方向:左右外边距会叠加
                垂直方向:上下外边距不会叠加,会合并,会取最大那个值


十一、盒子模型
    宽度/高度 = 指定可以存放内容的区域
    内边距= 填充物
    边框= 盒子自身
    外边距= 盒子与盒子之间间隙


    1、内容的宽度和高度:通过标签和height、width设置的高度、宽度
    2、元素的宽度和高度: 元素宽度= 左边框宽度+左padding+内容宽度+右padding+右边框宽度;元素高度 = 同理高度
    3、空间的宽度和高度: 元素空间宽度= 左margin + 左边框宽度+左padding+内容宽度+右padding+右边框宽度 + 右margin;元素高度 = 同理高度
    4、增加了padding，元素宽度、高度会变大，如果想元素宽度、高度不变,就要减去内容的宽度、高度
    5、增加了border宽度、高度，元素宽度、高度会变大，如果想元素宽度、高度不变,就要减去内容的宽度、高度
    6、box-sizing:center-box(默认)、border-box;//css3新增的元素，值设置为border-box专门解决4,5问题的,增加padding、border,内容宽度、高度自动变小,保持元素宽高不变


    练习:一个大盒子，一个小盒子，小盒子在大盒子中,让小盒子移动到大盒子中间
        方法一:设置大盒子padding
        方法二:设置小盒子的margin
                举一反三:用方法一大盒子元素空间变大，要计算元素空间,减去内容高度(或者使用box-sizing);
                         用方法二大盒子元素空间不会变,但是在设置magin-top时候(水平方向不会),大盒子也会跟着向下移动,要想解决这个问题,给大盒子设置一个边框即可


                注意:嵌套盒子可以使用“margin:0 auto”，使里面小盒子在水平方向居中，想使其水平、垂直都居中要用以上两种方法


                         所以,一般在开发中需要控制嵌套盒子之间距离,一定要先考虑padding(方法一),在考虑margin(方法二)，因为padding是用来控制父子关系的,margin用来控制兄弟关系的
    7、text-align(center)与margin(0 auto)区别:
            text-align(center):设置某个盒子中“文字”、“图片”、“超链接”水平居中
            margin(0 auto)：被设置这个属性的盒子,在其父级里居中
    8、系统会默认给页面标签外边距、内边距，开发之前就应该给清0，(百度yui css)


十二、行高
    所有的行都有高度，每一行的高度，(例如一行文字的高度，文字上方高度+文字高度+文字下方高度,文字在中间，也就是说文字当前行中垂直居中,距离上下高度一样)
    注意：
        1、行高与盒子高度不一样(默认盒子高度=行高)
        2、行高与盒子高度一样,这样就可以保证一行文字,在盒子高度中是垂直居中的（一行文字,如果多行文字,只能通过padding使其垂直居中）
        3、多行文字，要想使其居中只能使用padding,但首先要先设置行高,用内容高度height减去line-height,padding-top、padding-bottom， 在给一个box-sizing:border-box(或者把内容高度降低),就可以了，这里要注意,这里的pading-top是边框顶部距离文字行高顶部距离,padding-bottom是边框底部到行高底部的距离
        4、盒子装的文字,要以左边距为准,不能以右边距为准,右边距误差从何而来,右边距放不下一个文字就会换行,所以文字和内边距的距离就有误差


十三、布局
    1、标准流（垂直方向布局使用）
        1.1 浏览器默认布局
        1.2 块级元素垂直排版，行级元素水平排版
    2、浮动流（水平方向布局使用）
        2.1 浮动流布局,是一种"半脱离标准流"流布局
        2.2 浮动流只有一种排版方式,水平排版
            注意:
                a、浮动流不能用margin:0 auto对齐
                b、无论行内、块级、行内块级都可以水平排版
                c、浮动流的行内元素也能设置宽高
                d、浮动元素前面如果是块状元素,只能在此块状下一行
                e、字围效果,前面一个图片浮动,后面p标签不浮动，文字会自动给图片让位置,不会盖住文字
                    eg:
                    <div>
                        <img src="aaa.jpg"  style="float: left;" />
                        <p>ddddddddddddddddddddddd...</p>
                    </div>
                f、在标准流中,子元素可以撑起父元素的高度，在浮动流中子元素是不可以撑起父元素的高度的
        2.3 清除浮动
            eg：所有p都浮动,都浮动起来后div没高度
                <div>
                    <p>111</p>
                    <p>222</p>
                    <p>333</p>
                 </div>
                 <div>
                    <p>444</p>
                    <p>555</p>
                    <p>666</p>
                 </div>


            2.3.1 ：给前一个盒子一个高度,但是开发中,能不给高度就不给高度所以这种方式不常用
            2.3.2 ：给后面盒子添加clear属性(clear:both 、left、right),如果盒子有了clear属性,则此盒子的margin值失效
            2.3.3 ：隔墙法
                    2.3.3.1外墙法  在第一个盒子和第二个盒子中间加个块级元素(一般div),在此div上设置个clear:both,可以给让第二个盒子使用margin-top,但是不能让第一个盒子使用margin-bottom,一般情况下直接添加此div高度就好了
                    2.3.3.2内墙法 在第一个盒子子元素最后(333后)添加一个div,给此div设置clear:both,内墙可以使第一个盒子使用margin-bottom,可以给添加的div设置高度，不能让第二个盒子使用margin-top


                    外墙法与内墙法区别
                        a：外墙可以试第二个盒子使用margin-top ,内墙可以使第一个盒子使用margin-bottom
                        b：外墙法不能撑起第一个盒子高度,内墙法可以撑起第一个盒子高度
                    在企业中一般不常用隔墙法,不易阅读,不易维护
            2.3.4 :伪元素选择器法
                   伪元素选择器:给某个标签前面加个伪元素标签，或者后面加个伪元素标签;
                   eg:  div::before{ //给此div子元素最开始增加一个伪元素标签
                            content:"我是文章"; //给为元素增加内容
                            display:block;
                            height:0px;
                            width:100px;
                            clear:both;
                            visibility:hidden;//隐藏添加的子元素，与display:none区别在于,其元素还在页面,而display:none元素也从页面移走了
                        }
                        div::after{ //给此div子元素最后增加一个伪元素标签
                            content:"我是文章"; //给为元素增加内容
                            display:block;
                            height:0px;
                            width:100px;
                            clear:both;
                            visibility:hidden;//隐藏添加的子元素，与display:none区别在于,其元素还在页面,而display:none元素也从页面移走了
                        }
                        div{
                            *zoom:1; //加上此元素兼容ie6使用伪元素
                        }
                    所以清除浮动就可以给第一个盒子最后加一个伪after加个clear:both;display:block
            2.3.5:overflow:hidden
                  2.3.5.1（作用一） : 将超出标签范围内的内容隐藏
                  2.3.5.2（作用二） : 清除浮动,给第一个盒子加overflow:hidden
                  注意点:第一个盒子margin-bottom、第二个盒子margin-top都可以用,
                    但是在ie6下还是不行,解决ie6还是要加*zoom:1
                    eg：div{
                        overflow:hidden;
                        *zoom:1;
                    }
                 2.3.5.3(作用三):大小盒子嵌套,不想给大盒子设置边框,给里面小盒子设置margin-top不想把大盒子也定下来,此时就可以给大盒子设置overflow:hidden;大盒子就不会被定下来,跟给大盒子设置边框一个效果




    3、定位流
        3.1相对定位(relative):
            3.1.1：相对定位不脱离标准流,移动会相对于以前自己在标准流的位置,移动前的位置还保留
            3.1.2：由于相对定位是不脱离标准流的，所以在相对定位中是区分 块级元素/行内元素/行内块级元素的,行内元素不可以设置宽度、高度
            3.1.3: 由于相对定位是不脱离标准流的,所以相对定位元素会占用标准流中的位置,给相对定位的元素设置margin/paddding等属性,会影响到标准流的布局(比如给使用了relative盒子一个margin值,他会给移动之前保留那个位置加margin,而不会给移动后的位置加)


            使用场景：
                    1：用于微调自己位置
                    2：配合绝对定位absolute，绝对定位根据相对定位来定位
        3.2绝对定位(absolute)：
            3.2.1：绝对定位是脱离标准流的,不保留之前的位置
            3.2.2: 由于绝对定位是脱离标准流的，所以不区分行内/块级/行内块级，行内元素就可以设置宽度、高度了
            3.2.3：绝对定位元素,会忽略父元素的padding属性
            3.2.4:如果一个有绝对定位的元素,他有多个祖先元素有定位元素(relative/absolute/fix),那这个有绝对定位的元素,会以离他最近的这个定位元素定位
            3.2.5：一个绝对定位元素相对于body定位时候,当页面超过屏幕高度时候(网页有滚动条),此元素是以首屏作为参考点,而并非整个网页高度、宽度作为参考点(eg：给此元素设置postion:absolute;right:0;bottom:0; 滑动鼠标下滑,发现此div还是在首屏最底部,而并非在网页最底部)
            3.2.6：让绝对定位元素水平居中,让此绝对定位元素left:50%;margin-left:"-(width*0.5)";即可(margin-left的值,即为当前div的宽度一般)
        单独使用绝对/相对定位弊端


            相对定位：不会脱离标准流,会继续在标准流中占用一份空间,不利于布局界面
            绝对定位：默认情况下绝对已定位的元素会以body作为参考点,会随着浏览器的宽度、高度变化而变化
        所以要结合使用,子绝父相


        3.3固定定位(IE6不支持固定定位)
            3.3.1:脱离标准流,让某一元素不随着滚动条滚动而滚动
            3.3.2：不区分行内块级


        3.4静态定位：默认情况下元素就是静态定位


        3.5z-index：
            3.5.1定位元素都有z-index，默认为0，如果两个元素父元素没有z-index,谁的z-index值大,谁显示在最上面
            3.5.2如果两个元素的父元素的设置了z-index,那么子元素的z-index就会失效,谁的父元素z-index属性值大谁就显示在上面


十四、圆角
    方法一:border-radius: 左上 右上 右下 左下;
    方法二:背景图，先给div1一个平铺背景,此时是没有圆角的,然后左右切两个圆角,在div1中嵌套两个div2、div3,
    也给背景图div2 背景图放在left，div3放在right
十五、小知识点
    1、选项卡或者导航条一定要用 ul li做
    2、企业开发中想让两个盒子顶部对齐,最好浮动
    3、input 默认是有边框的
    4、全局
        a:去除margin、padding
        b:去除a标签下划线
        c:去除ul ol的list-style
        d:设置全局字体属性
    5、画左右箭头 rgba(0,0,0,0.3)//第四个是透明度




!!!====CSS3性增加的=====！！！
十六、过度模块
    1、a标签伪类选择器(伪类选择器可以用于任何标签,只是这里用a标签做事例)：专门用来修改a标签不同样式的状态的
            1.1 a:link{}  未被访问过的a标签
            1.2 a:visited{} 被访问过的a标签
            1.3 a:hover{} 鼠标悬停在的a标签
            1.4 a:active{} 鼠标长按不放状态下的a标签
        注意点:
            1、如果a标签味蕾选择器同时存在,必须严格按照顺序写
               link visited hover active
            2、一般a标签伪类选择器写背景、文字、下划线等，a标签内写跟盒子元素有关属性 eg:(a{margin;padding} a:link{color;background})


    2、过渡动画、
    div{
        width:50px;
        background-color:blue;
        transition-property:width,background-color;//告诉系统,哪个属性需要加过渡效果,多个属性用逗号隔开
        transition-duration:5s,4s;//过渡效果要几秒完成,不加没有过渡效果,多个属性用逗号隔开
        transition-timing-function: linear;//动画速度
        transition-delay:2s;//鼠标放在div上延迟2s再去执行动画


        //简写
         transition:width,background-color 5s,4s linear 2s ; //过渡属性  过渡时长 速度 延迟,过渡属性可以写all，代表所有属性
    }


    div:hover{
        width:100px; //只加这个比较生硬,这时候要加过渡
        background-color:red;
    }
十七、2D转换模块(transform)
    1、transform
        1.1、ratate
        div{
            transform:rotate(45deg); //div旋转45度,deg是度的意思，以中心参考点旋转
        }
        1.2、translate
        div{
            transform:translate(100px,50px);//将div水平向右移动100px 垂直向下移动50
        }
        div{
            transform:translate(-100px,-50px);//将div水平向左移动100px 垂直向上移动50
        }
        1.3、scale
        div{
            transform:scale(1.5,2);//元素水平方向拉伸1.5倍,垂直方向拉伸2倍,默认两个值都是1，如果比1小将缩小，而不是拉伸,如果水平垂直都一样,可以只写一个scale(1.5);水平垂直都是1.5拉伸
        }
        1.4、统一简写
        div{
            transform:ratate(45deg) translate(100px,0px) scale(1.5,1.5);//旋转45度并且水平平移100px,但旋转之后会改变元素坐标系,想着旋转方向平移，这样就不会沿着水平方向平移;transform:none xx xxx; 第一个参数为none是清楚旋转，回到0度;第一个默认不写就是none,清楚旋转也就是0度,第二个不写默认就是不移动(0px,0px)
        }
    2、旋转围绕点transform-origin:第一个参数水平，第二个参数垂直(三种参数：像素、百分比、位置left center top bottom)
        2.1、默认情况下,元素旋转都是以自我的中心点作为参考,transform-origin可以修改旋转的中心点
        加入div宽度、高度都是100px
        div{
            //以左上角为旋转点
            transform-origin:0px 0px;
            transform-origin:left left;
        }
        div{
             transform-origin:100px 0px;//以右上角为旋转点
        }
        div{
            transform-origin:100px 100px;//以右下角为旋转点
        }
        div{
            transform-origin:0px 100px;//以左上角为旋转点
        }
        div{
            transform-origin:50% 50%;//可以设置百分比,此时为中心为旋转点,默认
            transform-origin:center center;
        }


    3、旋转围绕轴向
        3.1 rotateX(45deg);//围绕x轴旋转45度
        3.2 rotateY(45deg);//围绕y轴旋转45度
        3.3 rotateZ(45deg);//围绕z轴旋转45度


    4、透视 ：近大远小,取值为像素，距离多远去看它
        4.1 perspective：越小拉伸越大，这个属性一定要加到想看到效果的元素的上级元素,父亲、爷爷都可以,但是不能给它自己这个属性


    5、阴影
        5.1盒子阴影
        box-shadow：水平方向偏移度(px)  垂直方向偏移度(px) 模糊度(px) 阴影扩展(在阴影上在添加垂直、水平偏移度 px) 阴影颜色 内(inset)外(outset)阴影;
        常用：就是前三个变量;//阴影颜色不写，默认颜色为盒子内部内容的颜色


        5.2文字阴影
        只有四个参数,不支持扩展、内外阴影
        text-shadow:水平 垂直 模糊度 颜色;//颜色也可以省略,默认是字体颜色


    6、翻转菜单


十八、动画模块
    1、动画三部曲
        animation-name:动画名字;
        animation-duration:时间;
        @keyframes 动画名字{
            from{},
            to{}
        }
    eg：
        div{
            height:100px;
            width:100px;
            background-color:red;
        }
        animation-name:my;
        animation-duration:2;
        }
        @keyframes my{
            from{margin-left:0px;}
            to{margin-left:100px;}
        }
        @keyframes my{ //从0%到100%
            %0{ left:0 ;top:0}
            %25{left:300px;top:0}
            %50{..}
            ...
            %75{..}
            %100{..}
        }
         @keyframes my{ //从0%到100%
            %0{rotate(10deg)}
            %{rotate(50deg)}
            %50{..}
            ...
            %75{..}
            %100{..}
        }
        注意点:
              1、animation相关属性是写在标签内的,二keyframes name{}是写在标签外的
              2、@keyframes name{}中的from{}与to{}之间没有","


    2、其他属性
        animation-timing-function:linear;//匀速
        animation-delay:延迟时间;
        animation-iteration-count:3;//默认动画只执行1次，infinite无限次
        animation-direction:alternate;//告诉系统是否需要往返动画 normal:执行完一次，回到起点再次执行;alternate:执行玩一次,往回执行下一次
        animation-play-state:running; //paused:动画停了; running:动画正在执行 div:hover{animation-play-state:running;},鼠标放上去就运动
        animation-fill-mode:backwards;//指定动画等待状态和结束状态的样式,默认none:不做任何改变;backwards:让元素默认等待时候显示动画第一帧的样式;forwards:让元素结束状态,保持动画最后一帧的样式;both:前两者都有;
    3、连写：
        animation: 名称 动画时长 动画速度 延迟时间 执行次数 往返动画


十七、3D动画
    transform-style:preserve-3d;//preserve-3d指3d ;flat:2d；设置此元素的所有子元素都为3d或者2d


十八、背景图
    background-size:宽度 高度;//背景图大小 取值：具体像素(100px 100px)、百分比(50% %50相对于整个盒子)、等比拉伸(100px auto、auto 50%)哪个属性auto会随着另一个属性设置等比拉伸图片不会变形、等比拉伸到宽度高度都填满当前元素(cover)、等比拉伸宽度高度，当宽度或者高度有一个填满就不拉伸了(contain)