header: 定义文档的页眉
nav:定义导航链接部分
footer:定义文档或节的页脚底部
article: 定义文章
section:定义文档的节
aside:定义所处内容之外的内容、侧边
新增属性
<datalist>
<option></option>
</datalist>
fieldset 表单相关元素分组,打包 legend搭配使用
新增input type属性
placeholder="请输入"
autofaocus
multiiple多个文件
required必填
acceskey激活快捷键
视频
audio多媒体ogg mp3 wav
<source src=""/>
autoplay自动播放
controls 控制控件
loop 循环播放
video 视频 Ogg mpeg.4 webm
css3新增选择器
结构(位置)伪类选择器(css3)
:first-child 首个子元素
:last-child 最后一个子元素
:nth-child 第N个子元素 (even)(odd) 奇数 (n)
全部:ntn-last-child
属性选择器
div[class="demo"] ^= $= *=
伪元素选择器
E::first-letter
E:: first-line
E:: selection选中可设置样式
after和before
E::before {
content:"";必带
}
在·盒子·内容内部前面插入内容,其实before是盒子,行内盒子,可转换
E:after 之后
css3盒子模型
box-sizing: border-box padding等之类外加模式变成内减
但会压下去图片(图片内放)
文字图片对齐
dispaly:inline-block;
vertical:center
margin-top: 10px;
比特虫---在线制作ico图片 引入
过渡(css3)
transition: 要过渡的属性(property) 花费时间(dur) 运动曲线 何时开始
0 ease 0 (默认值)
过渡动画:
动画:
2D变形(css3)transform 位移、旋转、倾斜、缩放、支持矩阵动画支持取代大量靠flash才实现的效果
translate(x,y) 移动 平移 rotate(deg)
transfrom:translate(50%,50%);走自己盒子一半
scale(x,y)0 0% 1 100%
rotate(45deg)
正为逆
transition-origin: right bottom(跳转原点)
skew(倾斜)
transform: skew(deg,deg)
鼠标经过显示阴影
box-shawdow: 4个边
3D变形
动画 animation动画名称 动画时间 动画曲线 动画开始 播放次数(inifinite) 是否反方向(alternate)
@keyframes move {
from {}
to {}
} 声明动画
动画旋转
flex伸缩布局
父 display: flex;
子 flex:1 占一份
min-width: 最小宽度
flex-direction: colum垂直(默认水平) row-reverse(水平翻转)
原文:https://www.cnblogs.com/jieshan/p/10258295.html