div 的分层
postion:static (默认值 无作用)
默认值,呆在文档流里 无作用
postion:sticky (大部分不兼容)
移动到后,变成 fixed 效果
position:relative
使用场景
- 用于做位移(很少用)
- 给 absolute 做爸爸
配合 z-index
- z-index:auto 默认值,不创建新的层叠上下文
- z-index:-1/0/1/2
position:absolute
使用场景
- 脱离原来的位置,另起一层,比如对话框的关闭按钮
- 鼠标按钮提示
配合 z-index 经验
- 相对于祖先元素不是 static 的定位 非仅 relative
- 某些浏览器不写top/left 位置会错乱
- 善用 left:100%
- 善用 left:50%;加负 margin(居中)+transform:tranlatex(-50%)
position:fixed 视口定位
使用场景
- 烦人的广告
- 回到顶部按钮
配合 z-index
- 手机上尽量不要用这个属性,坑很多
- 不信搜一下[移动端 fixed]
层叠上下文
z-index:10 不一定高于 z-index:5 比喻
- 每个层叠上下文就是一个作用域
- 作用域里的 z-index 跟外界无关
- 作用域内的才能比较
哪些不正交的属性可以创建它
- MDN 文档有写
- 需要记忆的有 z-index:0/flex/opacity/transform
- 文档根元素();
- position 值为 absolute(绝对定位)或 relative(相对定位)且 z-index 值不为 auto 的元素;
- position 值为 fixed(固定定位)或 sticky(粘滞定位)的元素(沾滞定位适配所有移动设备上的浏览器,但老的桌面浏览器不支持);
- flex (flexbox) 容器的子元素,且 z-index 值不为 auto;
- grid (grid) 容器的子元素,且 z-index 值不为 auto;
- opacity 属性值小于 1 的元素(参见 the specification for opacity);
清除定时器
var id = setInterval(() => {
if( n <= 200 ){
demo.style.left = n +'px'
n = n+1
}else{
clearInterval(id)
}
},1000/60)
页面查看渲染 rendering ->paint flashing
浏览器渲染过程
步骤
- 根据 HTML 构建 HTML 树(DOM)
- 根据 CSS 构建 CSS 树(CSSOM)
- 将两棵树合并成一颗渲染树(render tree)
- Layout 布局(文档流、盒模型、计算大小和位置)
- Paint 绘制(把边框颜色、文字颜色、阴影等画出来)
- Compose 合成(根据层叠关系展示画面)
三种更新方式
- 第一种,全走
- div.remove()会触发当前小时,其他元素 relayout
- 第二种,跳过 layout
- 改变背景颜色,直接 repaint+composite
- 第三种,跳过 layout 和 paint
- 改变 transform,只需 composite
查看 css 属性更新方式
csstriggers.com/
css 动画优化
JS 优化
- 使用 requestAnimatuibFrame 代替 setTimeout 或 setInterval
CSS 优化
- 使用 will-change 或 translate
- ??用 left 做动画 应用 translate
参考文章
- developers.google.com/web/fundame…
transform 变形
四个常用功能
- 位移 translate
- 缩放 scale
- 旋转 rotate
- 倾斜 skew
经验
- 一般都需要配合 transition 过渡
- inline 元素不支持 transform,先要变成 block
transform 之 translate
常用写法
- translateX()
- translateY()
- translateZ()且父容器 perspective
- translate(x,y)
- translate3d(x,y,z)
经验 -绝对定位元素的居中
left:50%
top:50%
transform:translate(-50%,-50%)
transform 之 scale 缩放
常用写法
- scaleX()
- scaleY()
- scale(x,y)
经验
- 用的比较少,因为容易出现模糊
transform 之 rotate 旋转
常用写法
- rotate([|]) 45deg
- rotateZ([|])
- rotateX([|])
- rotateY([|])
- rotate3d 太复杂
经验
- 一般用于 360 度旋转制作 loading
- 用到时在搜索 rotate MDN 看文档
transform 之 skew 倾斜
常用写法
- skewX(| )
- skewY(| )
- skew(x,y)
经验
- 用的比较少
# transform 多重效果
组合使用
- transform:scale(0.5) translate(-100%,-100%)
- transform:none 取消所有
transition 过渡
作用
- 补充中间帧
语法
- transition:属性名 时长 过渡方式 延时
- transition:left 2s linear
- 可以用逗号分隔两个不同属性
- 可以用 all 代表所有属性
- transition:all 2s
- 过渡方式有:linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier | step-start | step-end | steps ,具体含义要靠数学知识
注意
- 并不是所有属性都能过渡
- display:none =>block 没法过渡
- 一般改成 visibility:hidden =>visible
- display 和 visibility 的区别 display 不占据原位置
- background 可以过渡
- opacity 透明度可以过渡 一般不用
- 过渡必须要有起始 一般只有一次动画,或者两次,比如 hover 和非 hover 状态的过渡
animation
- 声明关键帧
- 添加动画
#demo.start{
animation: xxx 1.5s ease 1s infinite alternate forwards
}
/*还有一种是 from/to 对应 0%/100%*/
@keyframes xxx{
0%{
transform:none;
}
66.55%{
transform:translateX(200px);
}
100%{
transform:translateX(200px) , translateY(100px);
}
}
##缩写语法 animation:时长|过渡方式|延迟|次数|方向|填充模式|是否暂停|动画名
- 时长:s 或者 ms
- 过渡方式:和 transition 取值一样,如 linear
- 次数:3 或者 2.4 或者 infinite
- 方向:reverse|alternate|alternate-reverse
- 填充模式:none|forwards|backwards|both
- 是否暂停:paused|running
- 以上所有属性都有对应的单独属性
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 模板不会安装或需要功能定制以及二次开发?
发表评论
还没有评论,快来抢沙发吧!