回顾css总-----选择器，属性名，布局

review--------
HTML

  HTML：超文本标记语言，
   标记语言：
        html
        特点： 本身只能被浏览器读取，
                     本身不具有行为能力， 和逻辑运算能力
                     <div>1+1</div>
   脚本语言：JavaScript
           本身具有逻辑能力和行为能力
           需要（js的解析器）解析执行
            console.log（1+1）；  //2
   编译语言：java   本身具有逻辑能力和行为能力
                需要编译运行
                  .java计算机不识别 ——》.class
             system.out.print（1+1）；    //2

css:

     层叠样式表：
1.什么是css？
         作用：美化HTML的，不能脱离HTML而单独存在
2.基础语法
        1）如何设置属性：key:value;
              作用域    选择器{
                                key1：value1;
                                }
         2）注释  /**/
         3）速记写法
              border   border-image    padding   margin   background  
              list-style:list-style-image    list-style-type    list-style-position
3.html中引入css
          1）行内样式    style 属性中
          2）内联样式/内嵌式    当前style 标签中
          3）外部引入  ①link标签——建议使用 
                               ②@import  url()
             
              优先级：行内样式>内联样式/外部引入  谁更靠下谁更高

选择器

4.选择器 
              元素/标签选择器
              id选择器  #one
              类/class选择器    .one
              普遍选择器      *
              后代选择器     >选择当前 所有直接子元素         空格：所有后代元素包含孙代元素
              兄弟选择器     +后一个兄弟                                 ~：所有兄弟
              多选择器（新的选择方式）：  , 逗号          div,#one,.two{}
              组合选择器（新的选择方式）：  div#one    div.one 
                     好处：过滤  与.one的优先级不一样，    组合更高
              属性选择器：  【class】 
                                     【class=one】值为
                                     【class~=’one’】之一
                                     【class*one】包含one
                                     【class^’one’】开头
                                     【class$‘one’】结束
                                     
             伪类选择器：  ：伪类名称
                             div：first-child
                             div：last-child
                             ：nth-child（number/odd奇数/even偶数）
                             :first-of-type（少用）
                      
                      状态
                      ：hover当鼠标悬停时
                      按下没抬起
                      没有被点击之前
                      被点击/访问之后
                      顺序link  v   h   a
             伪元素选择器：      ：：伪元素名称
                         ：： first-letter     第一个字符的外侧加了个伪元素
                          <div>helllo</div>
                         div ：： first-letter {   }     h  加了一个行内元素
                              _ span   <div><span>h</span>elllo</div>
                         ：：first-line
                         ：：seclection
                         ：：before      元素内容之前
                         ：：after         元素内容之后
                               content：‘    ’  /  url（）
                               div::after{
                                        content：‘  word  ’      加入到  hello  后面 
                                      }
5.选择器的优先级
               特性值：
               1000   style属性
               100      id
               10         class、伪类、属性
               1            元素、伪元素
               ！important   不计入特性值的计算， 优先级最高（不建议经常使用）
               特性值越大，优先级越高；特性值相同时，越靠下的优先级越高

key

6.文本样式
             color
             font-size
             font-weight
             font-family
             text-改变字体大小写
             添加下划线
             word-
         
           网络字体：1.下载网络字体
                2.声明字体
                    @font-face{
                              font-family:'  '
                    }
                3.使用字体
                       div{
                              font-family:'  '
                    }
       
         字体图标库：
             fontawesome
                <i class='fa-fa-XXX'></i>   所有样式都下载，对代码是冗余压力 放在服务器上，
             iconfont
               <i class='iconfont-XXX'></i> 根据用户选择下载个数，  
                html:
                       i
                       span 
    
7.列表样式
         list-style:
            type    img   position
         line-height   行内元素的垂直居中
8.表格样式
          caption-side:
          border-collapse  表格边框合并 
9.盒子样式
          border=content+padding+margin+border
          盒子宽度=content+padding+border
               标准盒子:box-sizing:content-box           
               height
               width->content  
          
               边框盒子/怪异盒子:box-sizing:border:box
                width->盒子宽度   改内容区的宽度，padding改变不会变大。

       背景：
          background :
          
       边框：
          border
             width   style  color
          border-image:
              引入边框图片
              -so  源头引入，默认放在四个基点位置    切割
                    不能加单位，单位默认px

布局

10.布局
       默认文档流：从上到下，从左到右依次展示
       规则：先进性行级不急，在进行列级布局
       1）display  改变当前元素的属性
               inline将块级变行内
               block将行内变块级
               inline-block行内兼具块级
                   既能在一行显示，又能设置宽高
               
       2） 浮动
               float：left/right
               特点：  不会遮盖文字
                   设置给块级元素时，
                   块级元素的宽度不会独占一行（宽没有，默认子级元素撑起）
                   设置给行内元素：可以设置宽高属性
                   
                   清除浮动   clear：left/right/both
                    1.给浮动元素和非浮动元素之间【手动】添加一个块级元素
                    2. 通过伪元素选择器，给所有浮动元素的父级元素使用：
                                                        after{     content：‘    ’ ；
                                                                      display：block；
                                                                      clear： left  }
                    
                    浮动何时停止？
                    1.遇到父元素边框停止浮动
                    2.遇到其他浮动元素时停止浮动

      3）定位布局：
           position：
                ①static:静态布局
                      div*3
                ②absolute:绝对定位  通过具体的数值
                  特点：1）脱离默认文档流_飘起来
                             2）不保留定位前的空间
                             3）默认情况下，绝对定位元素根据body左上角进行定位
                              top:0  lerf:0
                             4）当父元素具有定位属性时，子元素会根据父元素左上角进行定位
                 ③ relative:相对定位    参照物
                   特点：1）默认根据元素本身之所在的位置进行定位
                         2）不脱离默认文档流
                         3）保留定位前的空间
                 ④fixed:固定定位
                   特点：和绝对定位相似
                   使用了固定定位的元素，不会随着滚动条的滚动而滚动
                 ⑤ sticky:粘滞定位（新的定位方式）
                           relative+fixed 
                                                           
         配合属性：
            left
            top
            right
            bottom

         z-index ：number
                  设置元素的堆叠顺序
                  数值越大，元素越靠上
                  元素一定要使用绝对定位属性

        外边距合并问题：
            父子级：
                1.给父元素添加边框属性
                2.将本应该设置给子元素的margin 设置给父元素的padding
                3.给父极或者子级添加float属性
                4.给父极或者子级添加position:absolute
                5.给父元素或者子元素添加display: inline-block;
                6.给父极元素添加overflow: hidden;
            兄弟级：
                解决方法：将设置给两个兄弟元素的margin，设置给一个元素即可
                合并规则：
                    1.如果两个数值均为正数，取较大一个进行设置
                    2.如果两个数值均为负数，取较小一个进行设置
                    3.如果两个数值一正一负，直接进行相加
            
              

        4）伸缩盒布局
               display:flex
                 当前元素即刻变成一个伸缩盒，并且所有子元素自动成为父元素的一个成员项item
             子元素的浮动属性，自动失效
                  flex-direction: 设置子元素的排列方式
                  row  默认行向
                  row-reverse   反转
                  colum  列
                   colum-reverse  反转
           flex-wrap: wrap;  换行
           --》 简写
           flex-flow:direction   wrap
       
       align-items:
           stretch： 子元素默认高度为父元素的百分之百
           flex-start   y轴方向的开始部分
           flex-end    y轴方向的结束部分
           center       y轴方向的中间部分
          
       justify-content:设置元素在x轴方向上的位置
           flex-start   x轴方向的开始部分
           flex-end    x轴方向的结束部分
           center       x轴方向的中间部分
           space-around    周围，x 轴方向的周围，每个元素的周围，左右
           space-between  元素之间的部分
           
     子元素：
       flex：number:当前item占据父元素剩余空间的份数

如何让子元素在父元素中水平和垂直居中
父元素为块元素 有宽高
1.子元素为行内元素
text-align:center
line-height:height
2.子元素为块级元素时
①给父元素设置伸缩盒布局：
display: flex;
justify-content: center;
align-items: center;
②给父元素设置display: flex;
给子元素直接设置 margin :auto
③给父元素设置一个定位属性，给子元素设置一个绝对定位；
然后给子元素所有配合属性设置0px;
并且给子元素设置 margin :auto
④给父极元素设置定位属性，子元素设置绝对定位；
将子元素的left: 50%; top: 50%;
再配合使用margin-top: -height/2; margin-left: -width/2;

动画

    animaition
    1.设定动画轨迹
       @keyframes  move{
            from{
               //设定元素的开始样式
               }
           to{
              //设定元素的结束样式
              }
         }
     
       @keyframes  move{
                0%{  开始位置
                }
                50%{  中间位置
                }
              100%{  结束位置
               }
        }
    2.应用动画
      div{
           animaition-name：move ；
       }
              
     animation-name: move;
        /* 动画名称 */
        animation-duration: 3s;
        /* 动画持续时间 */
        animation-delay:  3s;
        /* 动画延迟时间 */
        /* animation-iteration-count: infinite; */
        /* 动画的执行次数    可以数字，也可以infinite无限循环*/
        /* animation-direction: alternate-reverse; */
        /* 设定动画是否交替起点   
           reverse100%-0%   
           alternate交替起点0%-100%/100%-0%  
           alternate-reverse
        */
        animation-fill-mode: backwards;
        /* 定义动画开始前后的停留位置  
            forwards：动画开始前停留在100% 
            backwards：动画结束后停留在0%帧*/

     animation-timing-function: ease;
     animation-timing-function: ease-in;
     animation-timing-function: ease-out;
     animation-timing-function: ease-in-out;
     animation-timing-function: linear;
     steps（）                                   

选项卡的图标 ico格式图标
1.获取一个ico格式的图标
16px*16px
2.使用link标签引入图标

 <link rel="shortcut icon" href="./img/wb.ico" type='images/-icon'>
              
transitions过渡属性
        transition-property: all;对所有属性进行过渡
        transition-duration: 2s;过渡时间属性
        transition-delay延迟过渡
        transition-timing-function: linear;过渡曲线


 3.transform变形属性
       -rotate:旋转
       -skew  倾斜
      - scale  缩放——宽度放大n倍
      -  translate   移动

4.媒体查询
   1.引入一个viewport  meta 标签
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   2.设置样式
       1）在style标签内部
             @media  screen and (max-width:1000px){
                          //css样式
                }
        2）link标签
              <link rel="stylesheet" media='screen and  (max-width:1000px)' herf="">

css框架——扩展

        bootstrap:
           css+js:
             .css
               link标签引入<link rel="stylesheet" herf="">
               <div class=""></div>
             .js
 
 线性渐变，兼容性差
  background: linear-gradient(to left/right/top/bottom,red 30%,blue 60%,orange);
  镜像渐变  圆心位置向外扩散
    background: radial-gradient(circle,red,blue);