黄翔-20201029

动画：在类选择器中
    旋转transform: rotate(45deg);
    过渡：transition:all 20s ease-in;
             all:所有动画
             20s：时间
             ease-in:匀加速
    过渡效果一般在类选择器，不在伪类选择器。
    缩放：transform: scale(0.5);默认Z轴，可选X、Y轴
    倾斜：transform: skew(45deg);
    平移：transform: translate(-300px);
    扭曲：transform: matrix(-1,-1,-1,0,-1,1);两行三列三角函数矩阵
    超出部分隐藏overflow: hidden;（加在父容器起效果）
多个效果同时使用需在transform后面直接多个赋。

自定义动画@keyframes
    animation选定与@keyframes联系
    backwards使其停在第一帧
    forwards使其停在最后一帧
    infinite无限循环播放，有次数写数字
    alternate来回正反向播放
    inherit动画不播放

    可以通过%来自定义每个播放时间的画面

盒子模型

盒模型的层次关系
从上往下看，层次关系如下：
第1层：盒子的边框(border)，
第2层：元素的内容(content)、内边距(padding)
第3层：背景图(background-image)
第4层：背景色(background-color)
第5层：盒子的外边距(margin)
从这个层次关系中可以看出，当同时设置背景图和背景色时，背景
图将在背景色的上方显示

盒子模型的相关属性
margin（外边距/边界）
border（边框）
padding（内边距/填充 ）
我们可以理解一下各属性作用：
属性又分为上、右、下、左四个方向
问题：页面元素的宽度width、高度height如何计算？
答案：元素的实际占位尺寸 = 元素尺寸 + padding + 边框宽度
比如：元素实际占位高度 = height属性 + 上下padding + 上下边框宽度

盒子阴影box-shadow
盒子实际大小box-sizing
盒子圆角border-radius：30px;



html布局：
块级标签和行级标签的属性转换
float：浮动     块级标签加了浮动后就有行级标签不占一行的特性
（特别注意：使用float时，一点在外面加个容器包起来）

心得体会：
今天主要讲了一点CSS的动画以及对不同的块元素进行排版的知识，主要是浮动—float。还讲了一些我们常遇到的外边距，内边距，线条，以及一些基本的代码知识…….
今天在练习设计过程中还出现了很多的问题，但通过上网查询，不断的学习、解决、提高，设计出的网页不论是外观还是内容，都在不断的进步、改善。可以说在自己动手，不断实践的过程中，网页设计水平得到了很大的提高。热情和执着，我将来设计出的网页会更加专业，更完善。