布局
dispaly：block,inline,inline-block
默认block ——div,p,h1-h6,ul,form,ol .....
默认inline ——span,em,i,a,label,cite.....
position : static | relative | absolute | fixed
** 1、relative **
- 仍在文档流中
- 参照物是元素本身
** 2、absolute **
- 默认宽度是内容宽度
- 脱离文档流
** 3、fixed **
- 默认宽度是内容宽度
- 脱离文档流
- 参照物为视窗
实例：
1、遮罩层
css代码
.mask{
position:fixed;
top:0; left:0;
z-index:999;
width:100%; height:100%;
background-color:#000; opacity:0.3;
}
2、三行自适应布局
head
body
foot
2d变形
transform: none |
+
rotate()
rotate ()
transform: rotate(45deg)
transform: rotate(-60deg) 向左旋转60° 左手法则（大拇指指向自己）
translate (
) [, ]?) 偏移
translateX( value )
translateY( value )
transform:translate(50px) // x轴偏移50px
transform:translate(50px,20%)
//x轴向右偏移50px,y轴往下偏移20%（X轴百分比是以宽度为100%，Y轴以盒子的高度作为100%）
scale( number,[,number ] )缩放,第二值省略不写 默认等于第一个
scaleX( number )
scaleY( number )
transform:scale(1.2)
transform:scale(1,1.2)
transform:scaleX(1.2)
transform:scaleY(1.2)
skew( angle, [angle]? ) 倾斜 第一个值：往X轴倾斜度数（Y轴向X轴偏移） 第二个值：X轴向Y轴倾斜的角度
skewX(angle)
skewY(angle)
transform:skew(30deg)
transform:skew(30deg,30deg)
transform:skewX(30deg)
transform:skewY(30deg)
实例1
transform: translate(50%) rotate(45deg)
transform: rotate(45deg) translate(50%)
transform-origin 设置坐标轴的轴心原点的位置
transform-origin: 50% 50% (默认值，中心点)
transform-origin: 0 0
transform-origin:20%
transform-origin:right 50px 20px
transform-origin: to right 20px
perspective 透视效果
perspective: none |
perspective:none;
perspective:2000px;
perspective:500px; //人眼到物体的距离
3D
perspective-origin
perspective-origin:50% 50%;
perspective-origin:left bottom;
perspective-origin:50% -800px;
perspective-origin:right;
translate3d()
translate3d( translation-value ,, )
translateX(
translateY(
translateZ(
transform:translate3d( 10px , 20%, 50px);
transform:translateX( 10px );
transform:translateY( 20% );
transform:translateZ( -100px );
scale3d(
, , )
scaleX(
scaleY(
scaleX(
transform:scale3d(1.2, 1.2, 1);
transform:scale3d(1, 1.2, 1);
transform:scale3d(1.2, 1, 1);
transform:scaleZ(5);
rotate3d(
, , , )
rotateX(
rotateY(
rotateZ(
transform: rotate3d(1,0,0,45deg);
transform: rotate3d(0,1,0,45deg);
transform: rotate3d(0,0,1,45deg);
transform: rotate3d(1,1,1,45deg);
transform-style: flat | preserve-3d
是否保留3d空间
backface-visibility：visibility | hidden 背面是否可见
动画
transition-property none|
[ ',' ]*
transition-property : none;
transition-property : all;
transition-property : left;
transition-property : left,color;
transition-duration :
transition-duration : 0s
transition-duration : 1s
transition-duration : 1s , 2s , 3s
transition-timing-function 运动函数
cubic-bezier(
transition-delay:
transition 缩写综合
[ ',' ]*
transition : none;
transition : left 2s ease 1s, color 2s;
transition :2ss;
animation
animation 与 transition的区别
- transition
- 用于从一帧到另一帧时 做连贯做动画（两个关键帧）
- 需要触发
- animation
- 可做，从一帧到一个位置，再到目标位置（有三个关键帧）
- 页面载入 自动运行动画，可以不用触发
animation-name
animation-name :
animation-name : none
animation-name : abc ;
animation-name : abc, abcd;
animation-timing-function 运动函数
cubic-bezier(
animation-timing-function : ease;
animation-timing-function : cubic-bezier(0.25, 0.1 0.25 , 1);
animation-timing-function : linear;
animation-timing-function : cubic-bezier(0, 0 , 1 , 1);
animation-timing-function : ease , linear;
animation-iteration-count 重复次数
animation-iteration-count:
animation-iteration-count : 1;
animation-iteration-count : infinite;
animation-iteration-count : 1 , 2 , infinite ;
animation-direction
animation-direction :
animation-direction ： reverse 与目标相反
animation-direction ： alternate 往返动画
animation-direction ： alternate-reverse; 相反的往返
animation-play-state 播放状态（暂停，播放）
animation-play-state :
animation-play-state : running;
animation-play-state : paused;
animation-play-state : running, paused;
animation-delay:
animation-delay : 0s;
animation-delay : 1s;
animation-delay : 1s,2s,3s;
animation-fill-mode 结束动画在开始时是否保存第一帧的设置，动画在结束的时候，是否保存最后一帧的状态
animation-fill-mode:
animation-fill-mode ： none
animation-fill-mode : forwards
animation-fill-mode : forwards , backwards
animation
animation :
animation : none
animation : abc 2s ease 0s 1 normal none running
animation : abc 2s;
animation : abc 1s 2s both, abcd 2s both
备注：
animation : abc 2s ease 0s 1 normal none running
- abc name
- 2s duration 运行时长
- ease 动画函数
- 0s 延时
- 1 播放次数
- normal direction 运行方向
- none fill-mode
- running 播放状态
@keyframes 关键帧
@keyframes abc {
from{ opacity: 1; height : 100 px; }
sto{ opacity : 0.5; height: 200px; }
}
//两者表示一样
@keyframes abc {
0%{ opacity: 1; height : 100 px; }
100%{ opacity : 0.5; height: 200px; }
}
@keyframes flash {
0%, 50%, 100%{ opacity: 1; }
25%, 75%{ opacity : 0; }
}
animation: abc 0.5s both;
animation: flash 0.5s both;
animation: abc 0.5s both, flash 0.5s both;