css3-聊一聊那些你不知道的样式

新增选择器

• 兄弟选择器（相邻）

         E + F{}

• 通用

         E ~ F{}

• 属性选择器

        [attr]{}
        [attr=value]{}  ：一对一匹配
        [attr*=value]{} ：含有相同字母
        [attr^=value]{} ：特定开头
        [attr$=value]{}：特定结尾 
        [attr~=value]{} （不常用）
        [attr |=value]{}  （不常用）

• 伪类选择器

       1.动态伪类（聚焦状态）
            :focus{}
         
        2.UI状态伪类
             :enabled{}
            : disabled{}
            : checked{}
        3. :nth伪类
            :first-child{} ：第一个子元素
            :last-child{} ：最后一个子元素
            :nth-child(n){}
                   even 偶数
                   odd 奇数
             同种类型第一个  :first-of-type{}
             同种类型最后一个    :last-of-type{}
             同种类型第n个    :nth-of-type(){}

自定义字体

    @font-face {
          font-family:自定义字体名称;
          src: url(字体路径);}
          选择器{
           font-family:名称；
         }

阴影

    1.文本阴影  :  text-shadow
       四个值：水平方向投影   垂直方向投影   阴影的模糊半径  阴影颜色
    2.边框阴影  : box-shadow
       水平方向投影   垂直方向投影   阴影的模糊半径  阴影扩展半径  阴影颜色
       投影方式默认外投影 (若设置为 inset 为内阴影)

圆角

      1.boder-radius 值;    四个圆角一样；
      2. boder-radius 值1 值2 ;  左上 右下    右上  左下
      3. boder-radius 值1 值2 值3 ;  左上右上 左下右下
      4.boder-radius  4个值 ; 左上   右上  右下  左下

渐变

       1. 线性渐变
             background-image:linear-gradient(渐变方向，颜色1 颜色1位置，颜色2 颜色额2位置，........)
            渐变方向:  角度  数值+单位  (30dge)
            to 英文单词  to left center    to center top
        2.径向渐变
           background-image:radial-gradient(shape size position，颜色1 颜色1位置，颜色2 颜色2位置，...)
          shape渐变形状:
              ellipse  默认 椭圆形
              circle  圆形
          size 渐变大小:
              farthest-corner  渐变半径大小是从圆心到离圆心最远的角   默认
              farthest-side 渐变半径大小是从圆心到离圆心最远的边
              closest-corner 渐变半径大小是从圆心到离圆心最近的角
              closest-side 渐变半径大小是从圆心到离圆心最近的边
         position 渐变圆心位置:
             at x值 y值
             默认 at center center

变换  (transform)

     1. 移动  translate(X,Y)
          translateX（值）水平方向移动
          translateY（值）垂直方向移动
     2.旋转  rotate  角度
          rotateX（数值+deg）x方向旋转
          rotateY（数值+deg）Y方向旋转
          rotateZ（数值+deg）Z方向旋转
     3.   缩放  scale
        scaleX（数值）x方向缩放
        scaleY（数值）Y方向缩放
     4.扭曲  skew
          skewX（数值+deg）水平方向扭曲
          skewY（数值+deg）垂直方向扭曲

• 变换基点  (transform-origin)

           x值,y值
          默认在中心位置

过度  transition

      1.过度属性   transition-property
            过渡属性名
           多个属性名之间用逗号隔开
           多个属性名时，也可以用all来表示
     2.过度持续时间  transition-duration
          单位秒s或毫秒ms
     3.  过度速度
          transition-timing-function
                ease  默认 逐渐变慢
                linear  匀速
                ease-in 加速
                ease-out   减速
                ease-in-out  先加速后减速
                cubic-bezier（x1，y1，x2,y2）
    4. 过渡延时时间
          transition-delay
         单位秒s或者毫秒ms

自定义动画

• 关键帧

@keyframes   动画名称{
      from{
        样式属性名 : 属性值；
     }
      to{
       样式属性名 : 属性值;
    }
  }
    或
@keyframes   动画名称{
    0%{
        样式属性名 : 属性值；
    }
    50%{
       样式属性名 : 属性值;
   }
    100%{
        样式属性名 : 属性值；
    }
}

•  动画

        1. animation-name  动画名称
        2. animation-duration  动画持续时间
        3. animation-timing-function  动画速度
            ease 默认 逐渐变慢
            linear 匀速
            ease-in 加速
            ease-out 减速
            ease-in-out 先加速后减速
            cubic-bezier(x1,y1,x2,y2)
            steps(number) 跃阶函数
        4. animation-delay 动画延迟时间
        5. animation-iteration-count  动画次数
              数字
             infinite  无限次
        6.animation-direction 动画方向
            normal  默认 正向 从开始--->结束
            reverse  反向  从结束--->开始
            alternate  往返  从开始--->结束--->开始
            alternate-reverse  往返  从结束--->开始--->结束

分栏  

    column-width  列宽 栏宽
    column-count  列数 栏数
    column-gap  列间距
    column-rule 列样式
        column-rule-width
        column-rule-style
            solid  实线
            dotted 点状线
            column-rule-color

box-sizing

•     content-box   标准盒模型
•     border-box  IE盒模型 怪异模式

弹性布局(display:flex)

• 容器

        1.主轴的对齐方式
            justify-content:
               flex-start  默认 与主轴的起点对齐 左对齐
               flex-end 右对齐
               center  居中对齐
               space-between  每两个项目之间的距离相等
               space-around 每一行两侧的距离相等
               space-evenly
        2.交叉轴对齐方式
            align-items
               stretch  默认  当项目未设置高度或为auto时，将占满容器高度
               flex-start 与交叉轴的起点对齐 居上对齐
               flex-end  居下对齐
               center  居中对齐
               baseline 与第一行文字基线对齐
        3.主轴方向
            flex-direction
               row 默认 主轴为水平方向 起点在左侧
               row-reverse 主轴为水平方向 起点在右侧
               column 主轴为垂直方向 起点在上侧
               column-reverse 主轴为垂直方向 起点在下侧
        4. 项目换行
             flex-wrap
                nowrap 默认  不换行
                wrap  换行  第一行在上侧
                wrap-reverse 换行 第一行在下侧
        5.多根轴线对齐方式
            align-content
               stretch  默认  当项目未设置高度或为auto时，将占满容器高度
               flex-start  与交叉轴的起点对齐  整体居上
               flex-end  与交叉轴终点对齐 整体居下
               center 整体居中
               space-between 每两行之间的距离相等
               space-around 每一行两侧的距离相等
               space-evenly

• 项目

        1.order  项目排列顺序
            默认 0
            值越小越靠前
        2.align-self 
            auto 
            flex-start 与交叉轴的起点对齐 居上对齐
            flex-end  居下对齐
            center  居中对齐
            baseline 与第一行文字基线对齐
       3. flex-grow  项目放大比例
              默认为0  
              不能为负
        4. flex-shrink  项目缩小比例
              默认为1
              不能为负  当为0时 不缩小
         5.flex-basis  项目实际大小
              默认 auto

优雅降级和渐进增强

•  渐进增强 progressive enhancement： 针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。 

•  优雅降级 graceful degradation： 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。