秀日措-20201029

知识总结

1.transform

transition:all 3s;/*过渡*/

transform:rotate(240deg);/*旋转*/

transform:scale(.4);/*缩放*/

transform:skew(45deg);/*倾斜*/

transform:translate(300px);/*平移*/

transform:matrix();/*扭曲（两行三列的三角函数矩阵)*/

2.keyform自定义动画

animation:change 3s ease 1s forwards infinite alternate inherit;

animation-----绑定动画 ，动画名称

3s-----动画播放时间

ease------动画播放轨迹

1s------延迟播放

forwards----让动画停到最后一帧

2----播放次数（两次）  infinite-----无线播放

alternate----来回播放、正负播放

inherit-------停止播放

盒子模型

小盒子：外边距

margin-top;20px;

margin-bottom:20px;

大盒子：内边距

padding-top:20px

padding:20px;

margin:0 auto;水平居中

bordre-width:1px;

border-color:red;

border-style:solid;

box-sizing:content-box:/*盒子实际大小*/   content-box-->不包含边框

box-shadow:0px 0px 50px yellow inset;/*水平距离 垂直距离 模糊距离 盒子阴影*/

border-radius:30px;/*圆角*/

border-bottom-right-radius:100px;/*右下角*/

块级标签和行级标签的属性转化

1.块级标签加float(浮动)就有了行级标签不独占一行的特性

特别注意：使用float时，一定外面加个容器包起来

学习心得

虽然今天只上了下午的课，但是讲的知识点还是很多的，，但是只要

认真听讲和记好笔记就没法跟着老师一起操作，感觉自己有点跟不上

节奏，再者自己下去独立做作业时就会出现各种问题，导致实验无法

得到该得的结果。