web前端Html和css基本知识点的梳理

1.移动端的适配，cssHack
 Firefox:-moz-
 Chrome Safari:-webkit-
 Opera:-o-
 IE：-ms-
 ①css类内部hack,给样式正价前后缀。 + ： IE6，IE7
                - ： IE6
                               同时出现的话
                                + ：IE7
                                 - ：IE6
 ②选择器：                *前缀：IE6识别
                          div{ .... }
                          *div{ ... }
                          *+前缀：IE7
                          *+div{}
 ③条件注释
             
                              条件：
                                1、gt
                                   指定版本 以上的版本有效
                                  gt IE 6
                                2、gte
                                  大于等于指定版本 以上的版本
                                3、lt
                                   小于 指定版本的 浏览器
                                4、lte
                                   小于等于 指定版本的浏览器
                                5、!
                                   非IE浏览器时
     
 （线性渐变的）
 (zoom等于1，清楚浮动)
   * 浏览器不支持属性的话，前缀加在属性前。
    * 浏览器支持属性但不支持值的话，前缀加在值前。
2.css中的溢出：
  条件：在parent的没有border的情况下，并且此时给第一个firstElementChild设置了上外边距，这是就会产生外边距的溢出。
  解决方案:1.给父元素增加border。
      2.为父元素设置padding，进而取消firstElementChild的margin。
      3.父元素增加一个空的table;
      elem:before{
       content:'';
       display:block;
      }
  
3.定位：
  1.普通流的定位：
    块级元素可以通过margin进行定位。
    行内通过margin改变横向的位置。
    text-indent首行缩进;
  2.浮动定位
   2.1 脱离文档流，不占据页面的空间。
   2.2 会停靠在parent的左边或右边，或其他已经浮动元素的边缘上。
     （解决了块级元素不能再一行内的显示的问题）
   2.3 如果父元素的width无法容纳all的浮动元素，那么将造成最后一个换行。
     任何元素一旦浮动，都将变成block元素。
     如果该元素没有进行尺寸限制的话，float后width将变成自适应。
     文字，行内，行内块，采用环绕的方式。
  3.浮动元素会造成父元素的高度为0；
   solution:overflow.
   elem：after{
    content:'';
    display:block;
    clear:both;
   }
  4.相对定位
   相对元素原来的位置进行偏移，
  5.绝对定位
    脱离文档流，不占据页面的空间，
    现对于离他最近已定位的祖先元素进行定位（relative,absolute,fixed）;
    元素将变成块级元素，margin可以用，但是margin-auto失效。
  6.z-index：父子关系没有办法使用，只能是siblings;
  7.固定定位脱离文档流，fixed;
4.边框阴影：
  box-shadow:h-shadow  v-shadow  blur   spread color inset
     水平偏移 垂直偏移 （模糊距离）（阴影的尺寸） 颜色 外阴影该问内阴影
5.文字阴影：
  text-shadow:h-shadow v-shadow blur color;
 
6颜色的渐变：background-images:linear-gradient(angle,color-point1,color-point2,.....);
 background-image:linear-gradient(0deg,red 0%,green 10%,blue 50%);
7.伪类元素：用于匹配元素不同状态时的样式。
 伪元素：匹配元素的内容。
8.margin取值auto：
  1.只对左右外边距有效，上下外边距无效。
  2.用于控制块级元素水平居中。（该元素必须有宽度否者无效）。
  3.两个垂直外边距合并时，他们将形成一个外边距，以较大的为主。
9.背景图的固定：background-attachment:srcoll&fixed.
10.css Sprites以及PS传统切图和精准切图的。切片或裁剪或脚本进行智能切片。
11.text-align:控制文本的水平对齐方式。
  vertical-align:垂直居中 middle,行内块允许使用，img,左右两端的文本。baseline,图片基线的对齐方式。
  
  line-height:文本垂直居中
  font:12px/24px;


CSS高级
  1.复杂选择器
   1.1 兄弟选择器
   1.2 属性选择器
   1.3 伪类  （匹配元素状态）
   1.4 伪元素（匹配元素内容）
  2.内容生成
   2.1 内容生成----content,:before,:after
   2.2 计时器  counter-reset --counter-increment属性；利用:before 调用定时器
   2.3 转换：2D转换和3D转换
       transform:transform-function
       transform-origin:转换原点
       transform:translate()
       transform:scale();
       transform:rotate();
       transform:skew();
         
   2.4 过度:transition-property
       transition-duration
       transition-timing-function
       transition-delay:
   2.5 动画
       声明动画：@keyframes name{}
       animation-name
       animation-duration
       animation-timing-function
       animation-delay
       animation-iteration-count
       animation-direction
       animation-fill-mode:
       animation-play-state:
   定时器：
       setInterval(function(){},时间间隔)
        clearInterval(t)
       让程序按照指定的时间间隔反复自动执行任务；
        停止定时器：1.手动停止定时器
             2.判断临界值
       setTimeout(task,等待时间)
        clearTimeout(timer);
        timer=null
       先等一段时间在执行一次任务；执行后制动停止；
       
  HTML5：
  1.input新增的type:email,ulr,tel,date(F),color(F,C),search,number,range
      新属性：placeholder 占位符，autofocus 自动获取焦点，autocomplete是否记录上次提交的内容，
         与表单验证的属性
         required   必填属性，不然用户无法提交
         minlength  字符个数的限制
         maxlength
         max,min    用于meter,progress使用最大和最小值
         step       步长
         
      新元素：datalist数据列表，主要是为input提供输入列表。
          progress进度提示，不提交，不能操作
          meter刻度尺
          output:用于计算；
          都还存在兼容性
   修改表单验证的属性：
    H5为所有表单输入域提供了一个validity对象属性：
    valid 输入有效
    badeInput:无效输入
    customError:false是否存在自定义错误；
    rangOverflow
  2.视频和音频
   video和audio
   以及提供的play和pause方法；
  3.Canvas画图
    var ctx=canvas.getContext('2d');
     ctx.beginPath();
     ctx.moveTo(x,y);
     ctx.lineTo(x,y);
     ctx.closePath();
     chart.js
     利用定时器可以做一些动画；
     缺点：因为每个图形图像都不是HTML元素，不能直接绑定事件监听；
      所有的时间都是绑定canvas元素，再进一步绑定鼠标所在位置判断，
  4.svg
   适量图，放大不失真，每一个图形都是一个svg元素可以为任意图形进行时间监听；
     绘制折现；
        绘制多边形；
   Two.js
  5.地理定位
   var g=window.navigator.geolocation;
   g.getCurrentPosition(succCallback,errCallback);
  6.拖放事件
    源对象  被拖动的对象
     ondragstart  （开始拖动）
     ondrag    （拖动中）
     ondragend (拖动结束)
    目标对象  被拖动的对象可以移动到目标对象，实施移除和释放；
     ondragenter
     ondragover
     ondragleave
  7.web worker
    操作系统
    进程：分配内存的基本单位
    线程：是进程内部执行的代码
    主渲染线程与Worker线程间传递数据
    var w1=new Work('xxx.js');
      w1.postMessage('str');
    onmessage=function(event){event.data}
    
  8.web storage
    客户端存储，web存储，数据不能超过8MB，操作简单。
    sessionStorage
     会话级存储；窗口关闭，会话消失
    localStorage
     本地、跨会话级存储；窗口关闭并不影响；
  9.web cookie
    所有浏览器都支持，存储不能超过4kb,操作复杂。
  10.web Socket
    web Socket协议，客户端一点连接服务器就不断开（永久连接），
    HTTP基于“请求的-响应模式”，客户端你发送一个请求，服务器返回一个请求 。