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 ;
}