CSS day06

一、复杂选择器
  1.结构伪类选择器
    1.:only-child
      匹配的元素是属于父元素中的唯一子元素。
    2.否定伪类
      将满足指定选择器的元素给排除在外。
      语法：  :not(selector){...}
    3.伪元素选择器
      1.::first-letter或:first-letter
        作用：用于匹配元素的首字符
      2.::first-line或:first-line
        作用：用于匹配元素的首行
    注意：如果首字符和首行样式冲突时，优先使用首字符样式
      3.::selection
        作用：匹配被用户选取的内容
        注意：只能修改文本颜色和背景颜色
      4.内容生成
        1.什么是内容生成
      使用CSS动态的向元素中插入一段内容
    2.伪元素选择器
      ①:before或::before
      作用：匹配到某元素的内容区域之前。
      <p>(:before)<span>床前明月光</span></p>
      ②:after或::after
      作用：匹配到某元素的内容区域之后
      <p>床前明月光(:after)</p>
    3.属性
      content
      作用：向匹配到的位置处增加的内容
      取值：
        1.字符串，用""引起来
        2.URL(图片路径)
        3.解决问题
          1.上外边距溢出
             1.在父元素的第一个子元素位置处
         2.添加一个table标记，并且标记内容为空
          ex:
            选择器::before{
            content:"";
            display:table;
            }
          2.解决浮动元素对父元素高度带来的影响
             1.在父元素的最后一个子元素位置处
         2.添加一个空的块级元素（display:block）
         3.设置其clear属性的值为both
         ex:
           .类选择器:after{
            content:"";
            display:block;
            clear:both;
           }

 

二、弹性布局
  1.什么是弹性布局
    弹性布局(Flexible layout)是一种布局方式，主要解决某元素中“子元素”的布局方式，为布局提供最大的灵活性
  2.弹性布局的概念
    1.容器  子元素的父元素称为容器
    2.项目  要实现布局的子元素，称为项目
    3.主轴  项目们排列方向的一根轴，称为主轴
            如果主轴是x轴，那么y轴就是交叉轴
    4.交叉轴  与主轴垂直相交的一根轴，称为交叉轴
  3.语法
    1.弹性(flex)容器
      将元素变为flex容器后，那么所有子元素都将变为flex项目，都允许按照弹性布局的方式排列
    2.属性:display
      取值:
        1.flex 将块级元素变为容器
    2.inline-flex  将行内元素变为容器
      注意：
        1.元素设置为flex容器之后，子元素的float,clear,vartical-align将失效。
    2.元素变为弹性容器后，子元素的尺寸允许被修改(把子元素变为块级)
    3.容器属性
      1.flex-direction
        作用：指定容器的主轴及其排列方向
    取值：(1)row 默认值，即主轴为x轴，起点在左端
          (2)row-reverse 主轴为x轴，起点在右端
          (3)column 主轴为y轴，起点在顶端
          (4)column-reverse 主轴为y轴，起点在底部

      2.flex-wrap
        作用：当一个主轴排列不下所有项目时，元素是否换行显示
    取值：
      1.nowrap：默认值，即空间不足时也不会换行，项目自动缩小
      2.wrap：换行
      3.wrap-reverse:换行并反转
      3.flex-flow
        作用：是flex-direction和flex-wrap的缩写形式
    取值：1.row nowrap(默认值)
          2.direction wrap
      4.justify-content
        作用：定义项目在主轴上的对齐方式
    取值：
          1.flex-start  在主轴的起点对齐
          2.flex-end  在主轴的终点对齐
          3.center  在主轴上居中对齐
          4.space-between  两端对齐
          5.space-around  每个项目两端的间距相同
      5.align-items
        作用：定义项目在交叉轴上的对齐方式
    取值：
        1.flex-start  交叉轴上起点对齐
        2.flex-end  交叉轴上终点对齐
        3.center  交叉轴上居中显示
        4.baseline  交叉轴上基线对齐
        5.stretch  如果项目未设置尺寸，在交叉轴上占满所有空间
    

    4.项目属性
      该组属性只能设置在某一个项目元素上，值控制一个项目，不影响其他项目
      1.order
        作用：定义项目的排列顺序，值越小，越靠近起点，默认值为0
    取值：整数数组，无单位
      2.flex-grow空间，项
        作用：定义项目的放大比例，如果容器有足够的剩余目按照比例放大
    取值：整数数字，无单位
          默认值0，不放大
          取值越大，占据剩余空间的比例越多
      3.flex-shrink
        作用：定义项目缩小比例，即容器空间不足时，项目按照比例缩小
    取值：整数数字，无单位，值越大缩小得越快
          默认值1，空间不足时，则等比缩小
          取值为0，则不缩小

      4.align-self
        作用：定义当前某项目在交叉轴的对齐方式
    取值：
       1.flex-start 起点对齐
       2.flex-end 终点
       3.center 居中
       4.baseline 基线对齐
       5.stretch 未设定项目高度时占满父元素的空间
       6.auto 自动继承父元素align-items的属性值

三、转换
  1.什么是转换
    改变元素在页面中的位置，大小，角度以及形状的一种方式
    2D转换：只在x轴和y轴上发生转换效果
    3D转换：增加z轴的转换效果
  2.转换属性
    1.转换属性
      属性：transform
      取值：
        1.none  默认值，无任何转换效果
    2.transform-function  
      表示1个或多个转换函数
      如果是多个转换函数，中间用空格隔开
    2.转换原点
      属性：transform-origin
      取值：数组/百分比/关键词
            2个值，表示原点在x轴和y轴的位置
        3个值，表示原点在x轴y轴和z轴的位置
      默认的原点是在元素的中心位置
      transform-origin:left top;
      :(center,center)/(50%,50%)
    
    3.2D转换
      1.位置(位移)
        1.什么是位移
      改变元素在页面中的位置
    2.语法
      属性：transform
      取值：
          1.translate(x)
            指定元素在x轴上位移距离
        取值为正，元素向右移
        取值为负，元素向左移
          2.translate(x,y)
            指定元素在x轴和y轴上位移一定的距离
        x:同上
        y:指定元素在y轴上位移距离
        取值为正，元素向下移
        取值为负，元素向上移
          3.translateX(x)
          4.translateY(y)
       2.缩放
          1.什么是缩放
        改变元素在页面中的尺寸（大小）
          2.语法
        属性：transform
        取值：
           1.scale(value)
             value:横向和纵向缩放比例一样
               默认值1，不缩放
               value>1:放大
               0<value<1:缩小
               value<0:放大（水平和垂直方向都翻转180度）
           2.scale(x,y)
             x:横向缩放比例
         y:纵向缩放比例
           3.单向缩放
             scaleX(x)只在横向缩放
         scaleY(y)只在纵向缩放

    3.2D转换
         1.旋转
        1.什么是旋转
            改变元素在页面上的角度
        2.语法
          属性：transform
            取值：
             rotate(ndeg)
             n取值为正，顺时针旋转
             n取值为负，逆时针旋转

            注意：1.旋转是连同坐标轴一起旋转，会影响到旋转后的位移效果
                  2.转换原点会影响最后的转换效果
         2.倾斜
             1.
        2.语法
            属性：transform
        取值：skewX(xdeg)
              让元素向着x轴的方向产生倾斜效果，实际改变的是y轴的角度值
             n取值为正，y轴逆时针倾斜
             n取值为负，y轴顺时针倾斜
              skewY(ydeg)
              让元素向着y轴的方向产生倾斜效果，实际改变的是x轴的角度值
                 n取值为正，x轴顺时针倾斜
             n取值为负，x轴顺时针倾斜
              skew(x) 等同于skewX(x)
              skew(x,y) 同时在x,y轴上产生倾斜
    4.3D转换
        1.透视距离
          模拟人的眼睛到3D转换元素之间的距离
          属性：perspective
          注意：该属性要加在3D元素的父元素上
        2.3D旋转
          属性：transform
          取值：rotateX(xdeg)  以x轴为中心轴，旋转元素的角度 （爆米花机，烤羊腿）
                  rotateY(ydeg)  以y轴为中心轴，旋转元素的角度 （门，陀螺）
            rotateZ(zdeg)  以z轴为中心轴，旋转元素的角度 （电风扇，方向盘，摩天轮）
            rotate3D(x,y,z,ndeg)  x,y,z取值大于0的数字时，表示该轴参与旋转，取值为0则不参与旋转
四、过渡
  1.什么是过渡
    使得css样式在一段时间内平缓变化的效果
  2.过渡的语法
    1.指定过渡属性
      属性:transition-property
      作用：指定哪个属性值在变化的时候需要用过渡的方式来提现
      取值：1.all 能使用过渡的属性，一律用过渡提现
            2.具体属性名
    ex:transition-property:background;当背景的属性在发生变化时用过渡来体现
       transition-property:all; 所有属性发生变化时都用过渡提现
    允许设置过渡效果的属性：
        1.颜色属性
        2.取值为数字的属性
        3.转换属性
        4.渐变属性
        5.visibility属性
    2.指定过渡的时长
      作用：指定在多长时间内完成过渡操作
      属性：transition-duration
      取值：
         以s或ms为单位的数值
    3.指定过渡的速度时间曲线函数
      属性：transition-timing-function
      取值：
         ease 默认值，慢速开始，快速变快，慢速结束
     liner 匀速
     ease-in 慢速开始，加速结束
     ease-out 快速开始，慢速结束
     ease-in-out 慢速开始和结束，中间先加速后减速
    4.指定过渡的延迟
      属性：transition-delay
      取值：以s或ms为单位的数字
    5.过渡属性的编写位置
      1.将过渡放在元素声明的样式中
        既管去，由管回
      2.将过渡放在触发操作中
        只管去，不管回
    6.过渡的简写方式
      属性：
        transition:property duration
    timing-function delay;
    ex:
      transition:background 2s linear;  //正确
      transition:all;  //无过渡效果

四、动画
  1.什么是动画
    使用元素从一种样式逐渐的变化为另一种样式，即将多个过渡元素放在一起。
    动画是通过“关键帧”，来控制动画的每一步。
    关键帧：
         1.动画执行的时间点
     2.在该时间点上的样式是什么
  2.动画的使用步骤
    1.声明动画
         为动画起名，定义关键帧
     语法：
     @keyframes 动画名称{
         /*定义 关键帧*/
       0%{
        动画开始时元素的样式
       }
       25%{
        动画执行到四分之一时的样式
       }
       50%{
        动画执行到一半时的样式
       }
       100%{
        动画执行结束时的样式
       }
     }
    2.调用动画
      将声明好的动画，通过使用动画名称的方式来添加给元素
         1.调用动画的属性
       属性：animation-name
       作用：指定调用动画的名称
     2.animation-duration
       作用：指定动画执行一个周期的时长
       取值：以s或者ms为单位的数字
     3.animation-timing-function
       作用：指定动画速度时间曲线函数
       取值：
         :ease/linear/ease-in/ease-out/ease-in-out
     4.animation-delay
       作用：指定动画的延迟时间
       取值：以s或ms为单位的数字
     5.animation-iteration-count
       作用：指定动画的播放次数
       取值：
         1.具体的数字
         2.infinite 无限次播放
     6.animation-direction
       作用：指定动画的播放方向
       取值：
         1.normal 默认值，正常播放0%~100%
         2.reverse 逆向播放100%~0%
         3.alternate 轮流播放
           奇数次播放时，正向播放
           偶数次播放时，逆向播放
     7.动画属性的简写方式
       animation:name duration timing-function
       delay iteration-count direction;
     8.animation-fill-mode
       作用：规定动画在播放前或播放后的状态
       取值：1.none 默认值
             2.forwards 动画播放完成后，将保持在最后一个帧的状态上
         3.backwards 动画播放前，延迟时间内，动画保持在第一帧的状态上
         4.both 是 forwards 和 backwards的结合体
     9.animation-play-state
       作用：指定动画是处于播放还是暂停的状态上
       取值：
         1.paused: 暂停
         2.running: 播放
       补充：
         如果要兼容低版本浏览器的动画效果，可以使用加前缀
         ex:
         @-webkit-keyframes 动画名称{...}
         @-moz-keyframes 动画名{...}

五、CSS优化
  1.CSS优化的原则
    尽量减少HTTP请求个数
    页面顶部引入CSS文件
    将CSS和JS放到外部独立的文件中
  2.CSS代码优化
    合并样式
    缩小样式文件
    代码压缩
    选择更优的样式属性值
    避免空scr和href