web前端复习

1:五大常用浏览器

(1)Chrome webkit blink -webkit-

(2)FireFox Gecko -moz-

(3)IE Trident -ms-

(4) Oprea Presto -o-

(5)Safiri webkit -webkit-

2:

文本标签 :

下划线

span>

1:行内元素  
em,i, ....span  a  
特点:   设置宽高不起作用  由内容撑开  
        并排
2：块级元素  div p ul>li ol>li table 
特点:  设置宽高起作用  
      不能并排 独成一行  ----》浮动
3：行块级   img input dd  
 特点:设置宽高起作用  
      并排

# 转换 
行内--->块 display:block
行内--->行内块 display:inline-block
块---> 行内  display:inline 

a链接 打开方式 target: _self 旧页 / _blank 新页

day02

表单
<form>

    input	text/password/email/tel/submit/reset/radio/checkbox
    
    男:radio  女  radio   起相同的 name 属性 
    
      <input type="file"  multiple>  上传文件   multiple上传多个文件
    method ? get / post
    action? 
    


</form>

day03

基础 :* id class . TagName div p
层级: 子代 div>span 后代 div span   交集 div.box 
结构伪类；  ：first-child  :last-child ：nth-child(n) n从0开始
           li:nth-child(3){  }  失败 如果li父元素带三个不是li元素就找不到
           li：nth-of-type(n){}  li元素父元素的第三个li元素
属性 :  <div index = 1></div>  [index='1']  [index]

：hover  鼠标移入
 :active 按下   :target 锚点样式

div:hover{

}
div:active{ //鼠标按下

}


#盒模型
旧盒模型:
   盒模型宽 = width+padding*2+border*2 + margin*2
新盒模型:css3 
盒模型宽 = width(有效内容+padding*2+border*2)

转换: box-sizing:boder-box 新  / content-box 旧 
    -webkit-box-sizing:boder-box
    -ms-box-sizing:boder-box

.

文本居中:text-align:center line-height:盒子高度

盒子居中: margin:0 auto 水平居中

如何实现盒子水平居中和垂直居中:?

div {
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-自己的一半;
    margin-top:-自己的一半
}

脱标的两个定位 :绝对 ，固定 z-index:1222

c3 盒子阴影

box-shadow: 水平 垂直 模糊距离 px 尺寸 颜色 内(inset)外(默认)

text-shadow:水平 垂直 模糊距离 px 颜色

2D变形

transform: 
旋转 transform:rotate(30deg)
平移: transform:translate(300px)
缩放: transform:scale(1.5)
倾斜: transform:skew(60deg)

js

解释型 单线程异步

GO {

a:1

}

AO {

a:2 ;

}