*, ::before, ::after {
/*防止溢出*/
box-sizing: border-box;
/*盒子的大小从边框开始计算*/
-webkit-box-sizing: border-box;
}
边框
边框半径
border-radius:x x x x/y y y y
正圆:border-radius:50%;
边框图片
border-image-source:url();
切割图片 border-image-slice:
border-image-repeat:round;
背景：
background-size:
数字，百分比，
cover 完全覆盖整个元素，不考虑图片内容是否损失
contain 完全显示图片，不考虑是否覆盖整个元素
background-origin 背景原点(默认是padding-box)
background-clip 背景图片的显示位置
多背景：
background-image:
url("images/bg1.png") left top,
url("images/bg2.png") right top,
url("images/bg3.png") right bottom,
url("images/bg4.png") left bottom,
url("images/bg5.png") center center;
渐变
线性:
（方向，颜色 位置，颜色 位置）
background-image:linear-gradient(to right,red,green);
background-image:linear-gradient(0deg,red,green);
径向：
（半径 at 位置，颜色 位置，颜色 位置）
background-image:radial-gradient(20px at 10px,red,green);
过渡:
transition:过渡属性 过渡时间 过渡延迟 过渡速度
transition-property ..-duration ..-delay transition-timing-function:ease linear ease-in ease-in-out
transition: all 0.2s
过渡all所有变化的属性 0.2s代表属性从初始变化到结束所用的时间
事件:transitionend
2D转换:
1）位移 translateX(),translateY(),translate(X,Y)
2) 旋转 rotate 值越大 是顺时针 反之则逆时针
3）缩放 scale 值越大 放大 反之缩小
4）倾斜 skewX skewY skew
3D转换：
translateZ() translate(X,Y,Z)
视角：perspective
3d转换：transform-style:
flat 2d平面呈现
perserve-3d 3d空间呈现
元素水平和垂直的方向上都居中：
1）如何水平垂直居中一个已知尺寸的元素
position:absolute;
top:50%;
left:50%;
margin-left:-宽的一半
margin-top:-高的一般
2）如何水平垂直居中一个未知尺寸的元素
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
3）利用 flex 布局
.container {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
}
.container div {
width: 100px;
height: 100px;
background-color: pink; /* 方便看效果 */
}
animation:
1)定义动画：
格式：@keyframes 动画名称{
0%{}
25%{}
50%{}
75%{}
100%{}
}
2)调用动画
复合属性: animation:动画名称 动画总时间 动画延迟 动画速度
动画名称 animation-name 自定义的
动画总时间 animation-duration 时间
动画延迟 animation-delay 时间
动画速度 animation-timing-function ease ease-in ease-in-out linear steps(n)
动画次数 animation-iteration-count 数字 infinite(无线)
动画播放状态 animation-play-state running paused
动画完成时的状态 animation-fill-mode backwards回到最初 forwards停留在最后完成时的状态
动画方向 animation-direction reverse（反方向）
事件:animationend
伸缩布局：
..容器 给某个元素设置display：flex 就是伸缩容器
..项目 伸缩容器中直接的子元素就是伸缩项目
主 轴 默认水平方向，可调整
侧 轴 永远垂直主轴
主轴方向：
flex-direction: row;默认水平
flex-direction: row-reverse;水平反向
flex-direction: column;竖直
flex-direction: column-reverse;竖直反向
伸缩项目在主轴上的对齐方式：
/*主轴对齐方式 开始点对齐*/
justify-content:flex-start;
/*结束点对齐*/
justify-content: flex-end;
/*中心对齐*/
justify-content: center;
/*两端对齐*/
justify-content: space-between;
/*空间环绕*/
justify-content: space-around;
flex-wrap nowrap(不换行) wrap(换行) 默认不换
设置换行后的排列方式
align-content flex-start(起始点对齐) flex-end(终止点对齐) center(居中对齐) space-between(两端对齐) space-around(空间环绕)
设置不换行的排列方式
align-items(侧轴对齐) flex-start(起始点对齐) flex-end(终止点对齐) center(居中对齐) stretch(拉伸)
伸缩项目
1.伸缩项目在伸缩容器中所占的空间
flex:伸缩项目在伸缩容器剩余空间的比例
2.自己排列自己的对齐方式
align-self: flex-start(起始点对齐) flex-end(终止点对齐) center(居中对齐)
3.定义自己的排列顺序
order 值越小，越靠前
em rem:
em:的基准值 16px 默认的字体大小是16px,基准值是相对于父元素来的
rem：的基准值 16px 默认的字体大小是16px
r 是root 根元素的意思 html文档的根元素是 html标签
基准值是相对于来根元素（html）来的
