CSS3总结

一：属性选择器

E[attr] // 选择具有attr属性的元素。
E[attr=“val”] // 选择具有attr属性，且属性值为val的元素
E[attr^=“val”] //属性值以val开头
E[attr$=“val”] //属性值以val结尾
E[attr*=“val”] //属性值中包含val

div[class^=container]{
margin: 0 auto
}
<div class="test-container"></div>

二：伪类选择器

伪类选择器（:link,visited,hover,active,focus）
// 以下为结构伪类选择器

• first-child
• last-child
• nth-child
• E:nth-of-type(n)//指定类型的第n个元素

三：伪元素选择器

::before,::after

四：过渡效果

(1)可作为后面3D旋转的一部分。

transtion-property:all/width/height//所要过渡的属性
transtion-duration:0//过渡话费的时间
transtion-timing-function:ease/linear/ease-in//运动曲线

五：3D转换：

(1) 3D移动

transform:translate(100px/50%)//水平移动100px或者自身的一半宽度。
transform:translate(50%,50%)//水平垂直移动自身的50%。是显现盒子水平居中的其中一步。

transform:translateX()
transform:translateY()
transform:translateZ()
transform:3d()//以上三种效果的综合。

(2)透视:

prespective:100px
//在2D平面上产生近大远小的效果，为了方便展现当有多个盒子组合式的translateZ()的效果。像素值越大，成像越小。透视效果添加在父元素身上。

(3) 3D旋转

transform:rotateX()//旋转轴在中心
transform:rotateY()//同上
transform:rotateZ()//同上
transform:rotate3d(x,y,x,deg)//x,y,z均为矢量，如transform:rotate3d(1,1,0,45deg)表示沿对角线旋转。

(4)3D转换

transform-style:preserve-3d//表示所有子元素都在3D空间中呈现
transform-style:flat//表示子元素都在2D平面展现

(5)缩放转换

transform:scale()/scale3d()//可以解决谷歌浏览器不支持12px以下字体的问题。

六：动画

@keyframe 动画名称{
}
animation-name:
animation-timing-function：运动曲线
animation-delay:infinite//动画何时开始
animation-direction:normal/reserve/alternate/alternate-reverse
animation-duration:动画完成一个周期所耗时间

七：图片模糊

filter:blur(5px) //数值越大，图片越模糊

八：flex:1和flex:auto的区别

// flex-grow:项目的放大比例：默认为0，即如果存在剩余区域，该项目不会放大。
// flex-shrink:项目的缩小比例：默认为1，即如果可分配空间不足，会适当缩小项目。
// flex-basis:在分配空间之前，项目的主轴空间，相当于我们设置的width
flex:none: // flex: 0 0 auto;
flex:1:  // flex: 1 1 0%;
flex:auto: // flex: 1 1 auto;
// 如果width和flex-basis同时设置，非auto的flex-basis权重更大
<div class="flex-box">
    <div class="item1">短文本</div>
    <div class="item2">文本内容一定要比item长，文本内容一定要比item长</div>
</div>

<style type="text/css">
    .flex-box{
         display: flex;
         width: 1000px;
         text-algin:center;
    }

    .item1 {
        height: 100px;
        width:100px;
        flex: 1 1 0%; /*flex-basis为0%，覆盖width，元素实际占用宽度为0*/
        background:red;
    }

    .item2 {
        height: 100px;
        width: 400px;
        flex: 1 1 auto;  /*flex-basis为auto，width权限更高，占用300*/
        background:green;
    }
    /* 分配宽度前：
    子元素占用宽度为：0+400
    可分配剩余宽度空间：600
    可放大可缩小比例：1:1，获取的可放大空间：300+300
    */
    /* 所以实际每个子元素的宽度空间为：
    0+300
    400+300
    */
</style>