02.CSS进阶篇---杀怪升级

• 1.position(定位)
  • 01.static 默认 无定位
  • 02.relative 相对定位
    • 相对于原位置定位
    • 定位后原位置保留
    • 配合left，right top bottom去移动
    • 应用场景：配合绝对定位使用，自己小范围移动
  • 03.absolute绝对定位
    • 相对于已经定位的父元素
    • 定位后原位置不保留
    • 应用场景：形成独立的一层
  • 04.fixed 固定定位
    • 相对于浏览器窗口定位
    • 定位后原位置不保留
    • 配合left，right top bottom去移动
    • 应用场景：固定在页面某个位置
• 2.z-index(堆叠顺序)
  • 默认为auto
  • 取值越大层级越往上
  • 可以取负值
  • 必须配合定位使用（relative absolute fixed）
• 3.display（元素类型）
  • 01.block 块级元素
  • 02.inline 行内元素
  • 03.inline-block 行内块 即可在一行，又可设置宽高
    • 注意：行内块不识别代码之间空白
    • 常见行内块：img，input，button等
  • 04.none 不显示，原位置不保留
  • 05.flex 弹性盒模型
• 4.隐藏的区别
  • display：none；隐藏自己，隐藏后原位置不保留
  • visibility：hidden；隐藏自己，隐藏后原位置保留
  • opacity：0；隐藏自己，原位置保留
  • overflow：hidden；溢出隐藏
• 5.圆角
  • border-radius ：50%；
• 6.盒阴影
  • box-shadow： 水平 垂直 模糊度 尺寸 颜色 位置（outset外阴影inset内阴影）；
  • 字阴影：text-shadow： 水平 垂直 模糊度 尺寸 颜色 ：；
• 7.背景渐变
  • 线性渐变
    • background：liner-gradient（方向，颜色1，颜色2，。。。）；
  • 径向渐变
    • background：radial-gradient（中心点，形状，颜色1，颜色2，。。。）
• 8.转型 变型
  • 使元素在位置或者形状发生改变
  • transform：translateX/Y（）；水平或者垂直
  • transform：rotate（30deg）；旋转
  • transform：scale（X，Y）； 缩放
    • 当去一个值，等比例缩放
    • 当取二个值，水平和垂直
  • transform：skew（xdeg，ydeg）； 倾斜
  • 3D转换
    • transform：translate3d（x，y，z）；
• 9.过渡
  • 使元素从一个样式逐渐变为另外一个样式
  • transition：过渡的属性（all） 持续时间（s/ms） 速度变化类型 延迟时间；
    • 过渡属性
      • 数值 颜色 阴影 背景渐变 转换transform
    • 速度变化类型
      • ease 先加速后减速
      • ease-in 加速
      • ease-out 减速
      • ease-in -out 先加速后减速
      • linear 匀速
• 10.字体图标
  • 01.HTML中引入iconfont.css
  • 02.元素class="iconfont"
  • 03.把对应图标的Unicode编码负值到双标签之间（span）
• 11.动画
  • 01.定义动画过程
    • @keyframes name{ 0%/from{} 50%{} 100%/to{} }
  • 02.调用动画
    • animation：name 持续时间 速度变化类型 延迟时间 播放次数 播放方向 fill-mode；
    • animation-play-state：running/paused；
• 12.媒体查询
  • 实现了响应式布局
  • 768 992
  • 内部方式
    • 移动端 @media screen and(max-width:768px){}
    • ipad端 @media screen and(max-width:768px) and （max-width：992px）{}
    • pc端@media screen and(min-width:992px){}
  • 外部方式
    • 移动端：<link rel = "stylesheet" href = "" media = "screen and (max-width:768px)"/>
    • ipad端：<link rel = "stylesheet" href = "" media = "screen and (max-width:768px) and （min-width：768px）"/>
    • pc端：<link rel = "stylesheet" href = "" media = "screen and (min-width:992px)"/>
• 13.兼容性
  • 01.厂商前缀
    • 解决浏览器c3新特性的兼容问题
    • Chrome和Safari => WebKit ==> 前缀 -webkit
    • Firefox => Gecko ==> 前缀 -moz
    • Internet Explorer => Trident ==> 前缀 -ms
    • Opera => Presto ==> 前缀 -o
  • 02.css hack
    • 解决ie低版本兼容问题
    • CSS hack方式一：条件注释法
      • 只在IE下生效 <!--[if IE]> 这段文字只在IE浏览器显示 <![endif]-->
    • CSS hack方式二：类内属性前缀法
      • 前缀： + - — * #
      • 后缀：\0 \9 \9\0 !important
        • “-″减号是IE6专有的hack
        • “\9″ IE6/IE7/IE8/IE9/IE10都生效
        • “\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
        • “\9\0″ 只对IE9/IE10生效，是IE9/10的hack
• 14.弹性盒模型
  • 主要用于移动端布局
    • 01弹性盒模型中float clear vertical-align不生效
    • 02.父元素开启：display：flex；子元素水平排列
      • 子元素宽度由内容·撑开
    • 03.flex-direction:row(行)/ column（垂直）/ row-reverse/ column-reverse;
    • 04.子元素在主轴对齐方式
      • justify-content：center；
    • 05.子元素在侧轴对齐方式
      • align-items：center；
• 15.雪碧图(加分项)
  • 把许多小图整合到大图上面
  • 优点
    • 01.减小http请求
    • 02.减小命名困扰
    • 03.减小图片字节数
  • 原理
    • background-image : ；
    • background-position：；
• 16.HTML只能识别一个空格
• 17.实体字符
  • 当HTML不能识别一些特殊字符时，可以用实体字符来替代
    • 空格 &nbsp;
    • < &lt；
    • > &gt;