持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第9天，点击查看活动详情
htm5新增语义化标签
在ie9中我们需要把这些元素转换为块级元素
header nav article section aside footer
video muted
谷歌浏览器把自动播放功能给禁用了, 有解决方案: 给视频添加 静音属性
input表单 表单属性
required placeholder autofocus(baidu)
autocomplete 当用户在字段开始键入是,浏览器基于之前键入过的值,应当显示出字段中填写的选项
multiple 可以多选 文件提交
css3属性选择器 权重为10
button[disabled] {
cursor: default;
}
以icon开头
div[class^="icon"] {
}
以icon结尾
div[class*="icon"] {
}
包含icon
div[class*="icon"] {
color: blue;
}
<div class="icon1">icon</div>
<div class="icon2">icon</div>
<div class="icon3">icon</div>
结构伪类选择器 权重10
:firtst-child
:last-child
:nth-child(n) n可以是数字,关键字和公式,如果n是公式,则从0开始计算
n+5从第五个开始
-n+5前5个(包含第5个)
of-type 选择指定类型的元素
:first-of-type
:last-of-type
:nth-of-type(2)
div span:first-of-type {
background: red;
}
css伪元素选择器 必须有content属性 权重为1
::before
::after
2D转换
/*过渡写到本身上,谁做动画给谁加 */
transition: all 0.3s;
transform: translate(x,y); translateX translateY 不会影响其他元素,对行内标签没有效果;
route(360deg);
transform-origin: x y; 设置元素的转换点
scale(x, y); //里面的数字不跟单位, 就是倍数的意思 默认以中心点缩放, 不影响其他盒子
综合写法
先旋转会改变坐标轴的方向,其顺序会影响转换的效果
当我们同时有位移和其他属性的时候,记得要将位移放到最前面
动画
form 和 to 等价于 0% 100%
@keyframes move {
/开始状态/
0% {
transform: translateX(0px);
}
/结束状态/
100% {
transform: translateX(1000px);
}
}
div {
/调用动画/
animation-name: move; //动画名称
animation-duration: 2s; //持续时间
animation-direction: alternate; //是否反方向.默认是normal 反方向alternate
animation-iteration-count: infinite; //重复次数
animation-fill-mode: forwards; //规定动画结束后状态, 保持forwards
回到起始backwards
animation-play-state: running; //规定动画是否运行或暂停,默认是running还有 paused(简写不包括)
}
animation: move 2s linear 0s 1 alternate forwards;
steps(10)步数
