周玉莲-20201029

一、知识总结

1、动画
 transition: all:所有的属性都有一个过渡效果 3s:必须要有( ease-in:匀加速 3s:动画延迟播放):可选项;/*过渡*/
.box:hover{
    transform:rotateY(90deg):沿Y轴旋转90度(360deg):360度旋转;/*旋转*/
    transform: scale(.7):缩放0.7倍;/*缩放*/
    transform: skew(45deg);/*倾斜*/
    transform: translate(300px);/*平移*/
    transform:scale(0,1) matrix(-1,-1,-1,0,-1,-1,);/*扭曲 2行3列的三角函数矩阵*/
    在一条命令里完成多种动作,空格隔开
}
.box{       .
    overflow: hidden;/*子容器超出父容器的部分隐藏*/
    transition:all 3s;
}
反面也加个画面
.box{       .
    width: 300px;
    height: 200px;
    margin: 0 auto;
    border: 2px yellow solid;
    border-radius: 100px;
    background: url(../img/u.jpg);
    background:-size:190px,230px;
    overflow: hidden;/*子容器超出父容器的部分隐藏*/
    transition:all 3s;
}
.box:hover{
    transform: rotateY(180deg);
    background: url(../img/u.jpg);
    background-position :-120px 0;
}
2、自定义动画
 animation: change 3s;绑定
.box:hover{
       animation:动画名称 change:持续时间 3s ease:延迟播放 1s forwards:播放停到最后一帧;
       infinite:循环播放;alternate:来回播放;running:动画播放
2、盒子模型
盒子模型的尺寸组成  (默认尺寸)宽 :padding-left + border-left + 盒子本身的宽度 + padding-right + border-right 
 高 :padding-top + border-top + 盒子本身的高度 + padding-bottom + border-bottom。
限制盒子尺寸
content-box  代表盒子默认尺寸 通常使用内边距的时候 因为内填充会撑大我们设置的盒子尺寸 导致用了内边距的盒子不是
我们想要的尺寸 设定box-sizing: border-box;以后代表盒子的所有尺寸包含在我设置的宽高里 最开始设置的是什么尺寸就是
什么尺寸。
内边距,:
padding属性用于内边距,是指距离盒子边框的距离,默认状态下会改变盒子自身的尺寸。
padding-left:左内边距
padding-right:右内边距
padding-top:上内边距
padding-bottom:下内边距
外边距:
margin属性用于设置外边距,在元素之间创建空白,空白处不能放其他内容。
margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:左外边距
上下左右外边距: 设置顺序 上右下左(顺时针)
外边距实现盒子居中:
可以让一个盒子实现水平居中,需要满足两个条件:(1)必须是块级元素(2)盒子必须指定了宽度;然后在给左右的外边距
都设置为auto,就可以使块级元素水平居中。代码:.header{wight:960px;margin:0 auto;}
设置边框颜色的顺序:border-top-width 上右下左(顺时针顺序)
边框线条样式: border-style:上右下左
圆角边框:border-radius 顺时针顺序设置(左上,右上,右下,左下 顺时针顺序) 盒子中心点到原有角的距离(圆的半径)
盒子实际大小:box-sizing:content-box;
盒子阴影:box-shadow:X轴 Y轴 Rpx color ;(属性说明:阴影的X轴(可以负值)、阴影的Y轴(可以负值) 阴影模糊值
(大小)、阴影的颜色)如果使用了inset,则变为内部阴影
浮动:float:方向;
块标签和行级标签的属性变化:1、块级标签加float就有了行级标签不独占一行的特性
特别注意:使用float时,一定在外面加个容器包起来
3、块标签和行级标签的属性

标签

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1