css知识总结
浏览器渲染原理
- 根据HTML构建HTML树 （DOM）
- 根据CSS构建CSS树 （CSSOM）
- 将两种书合并成一颗渲染树（render tree）
- Layout布局 （文档流，盒模型，计算大小和位置）
- Paint绘制（把边框颜色，文字颜色，阴影颜色等画出来）
- Compose合成（根据叠层关系展示画面）
三种树
三种更新方式
transform属性（变形）
四种常用功能
-
translate （位移）
.a { transform: translate(x,y); /*值元素在x轴方向移动x，在y轴方向移动y*/ } 常用写法 transform: translate(x,y) transform: translateX(x) transform: translateY(x) -
scale（缩放）
.a { transform: scale(1.5);/*元素会放大1.5倍*/ } 常用写法 transform: scale(1.5) transform: scaleX(1.5) transform: scaleY(1.5) -
rotate（旋转）
.a{ transform: rotate(45deg);/*元素旋转45度*/ } 常用写法 transform: rotate(45deg) transform: rotateX(45deg) transform: rotateY(45deg) -
skew （倾斜）
.a { transfrom: skew(10deg,10deg);/*沿着x轴和y轴各倾斜10度，*/ } 常用写法 transfrom: skew(10deg,10deg) transfrom: skewX(10deg) transfrom: skewY(10deg)
transform多重组合写法
transform: sclate(1.5) translate(20,40);
transform: none; 取消所有
transition属性（过度）
transition: 属性名 时间 过渡方式 延迟
注意：故事所有属性都能过滤。可以用all代替所有属性。
transition属性 （动画）
transition: 动画名 | 时长 | 过渡方式 | 延迟 | 次数 | 方向 | 填充模式 | 是否暂停
@Keyframes（创建动画）完整语法
第一种写法from to
@Keyframes dong {
from {transform: translateX(0%)}
to{transform: translateX(100%)}
}
第二种写法百分数
@Keyframes dong {
0% {transform: translateX(0%)}
50% {background:red;}
100% {transform: translateX(500px)}
}
\
