css知识点细节梳理总结

背景
    background-color  背景颜色
    background-image:url('')  背景图片
    background-repeat  背景图片重复方式
      repeat-x  x方向重复一行
      repeat-y  y方向重复一列
      no-repeat 不重复
      repeat    【默认】x方向y方向重复铺满
    background-position 设置背景图片的位置
      关键字
      绝对单位  -200px -100px
      可以用来实现CSS Sprites技术，图片精灵技术
      图片精灵技术的好处？
        减少网页访问服务器的次数，节约网络资源。
      图片精灵技术怎么实现？
        将所有使用背景图片的元素设置同一张背景图片
        根据需要显示背景图片中的不同位置上的内容，使用background-position属性实现
    background-origin 设置背景图片开始的区域
      padding-box 【默认】从内间距区开始绘制  
      border-box   从边框区开始绘制
      content-box  从内容区开始绘制
    background-clip 背景图片的裁切
      padding-box   从内间距区开始裁剪  
      border-box   【默认】从边框区开始裁剪
      content-box   从内容区开始裁剪
    background-attachment 设置背景图片的固定点
      scroll 【默认】背景图片随着滚动条滚动
      fixed   背景图片固定，即使内容滚动，背景图片不滚动
    background 速写属性
      [<attachment>][<clip>][<color>][<image>][<position>][<repeat>]
      background:fixed content-box red url('') center no-repeat;
    哪个效率更高?
        background-color:red;  效率高
        background:red;
        你给我个钳子    你给了我一个，我就当做钳子去使用
        你给我个工具    你给了我一个，我再看这个东西是什么
        与人沟通
          做项目
        三要素
          时间 地点  人物

        前端与后台对接需要注意的事情  对接接口
          时间 什么接口  什么参数  发生了什么问题，响应是什么
        
  边框
    border:1px solid red;
      border-width  边框线的宽度
      border-style  线的样式
      border-color  线的颜色
    border-top    上边框
      border-top-width
      ...
    border-bottom  下边框
      ....
    border-left  左边框
      ...
    border-right 有边框
      ...

    border-radius 设置圆角边框
      50% 圆
      border-top-left-radius  左上角的圆角边框
      border-top-right-radius  右上角的圆角边框
      border-bottom-left-radius  左下角的圆角边框
      border-bottom-right-radius  右下角的圆角边框
    实现一个三角形，要求其他方向都是没有颜色

总结布局
  盒模型布局
    width
    height
    padding  内间距，元素内容距离边框的空间
    border   边框
    margin   外边距，元素与其他元素之间的空间
    box-sizing  盒子模型的类型  content-box w3c盒子，默认。
                border-box IE盒子

    padding和margin的取值
      一个值  上下左右
      两个值  上下  左右
      三个值  上  左右  下
      四个值  上 右 下 左
  浮动布局
    将块级元素显示在一行。脱离文档流，原先位置不保留。浮动在上层。
    float:left;
    float:right;
    float:none;
    清除浮动产生的影响
      兄弟元素上使用  clear:both; 来清除浮动
      父元素上使用   overflow:hidden; 来清除子元素浮动对父元素产生的影响
  定位布局
    灵活的设置元素在页面中或者视口区的位置。
    使用position属性。
    静态定位  static  默认
    相对定位  relative 
      相对于原先在文档流中的位置定位，不脱离文档流，原先位置保留
    固定定位  fixed
      相对于视口区进行定位，固定在某一个位置，页面滚动的时候它不动。脱离文档流，原先位置不保留
    绝对定位  absolute
      如果有定位祖先元素，相对于离它最近的定位祖先元素进行定位。
      如果没有定位祖先元素，相对于视口区的左上角进行定位。
      脱离文档流，原先位置不保留
    定位元素：使用相对定位或者固定定位或者绝对定位的元素
    定位元素有定位属性可以使用：left right top bottom

  伸缩盒布局，弹性盒布局
    display:flex;
    display:inline-flex;
  容器和子元素(项目)
    主轴    默认x轴，可以通过设置flex-direction去改变
    交叉轴  默认y轴

    容器上使用的属性
      display:flex;
      justify-content:flex-start/flex-end/center/space-between/space-around;  子元素在主轴上的排列方式
      align-items:flex-start/flex-end/center/stretch/baseline;   子元素在交叉轴上的排列方式
      align-content:flex-start/flex-end/center/stretch/space-between/space-around   多主轴在交叉轴上的排列方式
      flex-direction:row/row-reverse/column/column-reverse;  伸缩方向设置
      flex-wrap:nowrap/wrap/wrap-reverse; 设置子元素在容器内是否换行
      flex-flow:flex-direction flex-wrap; 速写属性
          flex-flow:row wrap;
    子元素，项目上使用的属性
      flex:1;    子元素占容器空间的几分之一
      flex:1 300px; 
      flex:300px 1;  子元素最小大小为300px，如果容器内有剩余空间，那么再占一份

 动画
    声明一个动画
      @keyframes myani{
        from{
          ....
        }
        20%{
          ....
        }
        50%{

        }
        to{
          ...
        }
      }
    使用动画
      div{
        animation-name:myani;   //使用某一个动画
        animation-duration:300ms/3s;   //设置动画时长
        animation-delay:200ms/2s;  //动画延迟时间
        animation-play-state:paused/running;   //动画状态
        animation-iteration-count:5/infinite;   //动画迭代的次数
        animation-direction:normal/reverse/alternate/alternate-reverse;    //动画的方向
        animation-timing-function:linear;   //动画执行的速度曲线
      }

兼容性
  各大浏览器厂商的私有属性
    -moz-   火狐浏览器
    -webkit-  谷歌浏览器，safari浏览器
    -o-      欧鹏浏览器
    -ms-    IE