陈菊-20201029
知识总结
<!--动画-->
ctrl +/=注释
ctrl+shift=整理代码
.box{
width: 200px;
height: 200px;
background: red;
margin:0 auto;
transition: all 3s ease-in; /*过渡*/
}
.box:hover{
width: 600px;
background: yellow;
transform:rotate(360deg) ;/*旋转*/
transform: scale();/*缩放*/
transform: skew(-45deg);/*倾斜*/
transform: translate();/*平移*/
transform: matrix(1,-1,0,0,-1,1);/*扭曲 两行三列的三角函数矩阵*/
overflow: hidden;/*子容器超出父容器的部分隐藏*/
animation:change/*动画名称*/
3s/*动画播放时间*/
ease/*播放轨迹*/
1s/*延时播放(隔一秒变)*/
forwards/*让动画停在最后一帧*/
2/*播放两次*/
infinite/*来回播正负播*/
inherit/*控制是不是播放*/
<!--盒子模型-->
小盒子:外边距
margin-top:20px
margin-botom
magin:20px
大盒子:内边距
padding-top:20px
padding :100px 200px 300px 400px;/*上右下左 顺时针*/
magin: 0 auto;水平居中
padding: 100px;/*写两个上下左右 写四个上右下左*/
box-sizing: border-box;/*包含边框 content-box 不包含边框*/
box-shadow: 3px 3px 3px yellow inset;/*水平 垂直 模糊 内阴影 边框*/
border-radius: 50%;/*圆角*/
border-bottom-right-radius:200px ;/*右下角*/
border-width
inset /*盒子内阴影*/
border-radius: 50%;/*圆角*/
<!--页面布局-->
<!--
块标签和行级标签的属性转化
1、块级标签加float(浮动)就有了行级标签不独占一行的特性
特别注意:使用float时,一定外面加个容器包起来
-->
float: left;/*浮动*/
心得体会
今天是实训的第四天,今天学习很吃力,老师讲得太快了记不下来希望老师后面可以稍微放慢一点速度。
每天都在学习新内容,基础差所以学习过程中感觉挺累的,安排下来的作业也要花很长时间才能完成。今
天学习了动画、盒子模型和页面布局的常用命令。虽然过程很辛苦,但是收获也是很大的。明天依旧和老师
一起继续学习呀!
近期评论