20210524-于晓雯

日志

一、学习总结

1、transform可以将元素旋转，缩放，移动，倾斜等。

transform: none|transform-functions;

none ：不进行转换；translate ： 2D 转换，移动；scale:缩放；skew:沿着X和Y轴倾斜转换；rotate：旋转。

2、transition属性设置元素过渡效果，属性有：

​ 1）transition-property 指定CSS属性的name，transition效果。
​ 2）transition-duration transition效果需要指定多少秒或毫秒才完成。
​ 3）transition-timing-function 指定transition效果的转速曲线。
​ 4）transition-delay 定义transition效果开始的时候。

3、动画：可以使一个元素的值之间发生大小、数量、百分比和颜色等方面的变化。

@keyframes animationName{
from {}
to {}
}

4、布局：如果有浮动，一定要有一个父容器，并且定义宽高。

​ 1)正常布局流；

​ 2)浮动：float:left/right；清除浮动：clear:left/right/both;浮动脱离文档流，不占原来的文档流位置；不占父元素空间；非浮动元素不能用外边距隔开距离。

5、定位：position

​ 1）静态定位:position(默认)；

​ 2）相对定位：position:relative，通过用 top ， bottom ， left 和
right 属性配合使用。

​ 3）绝对定位：position:absolute：相对于static定位以外的第一个父元素进行定位。绝对定位的元素不再存在于正常文档布局流中。

​ 4）固定定位：fixed：与绝对定位相同，只是固定定位元素相对html或非static定位的，而固定定位元素以浏览器视口定位。

​ 5）position: sticky：相对位置和固定位置混合体，它允许被定位元素像相对定位一样，直到到达一定阈值为止就变得固定。

​ 6）z-index：对Z轴的参考，正值移动到堆栈上方，负值移动到堆栈下方。默认情况下，定位的元素都有此属性，值为auto，意为0。

6、样式优先级：id 选择器>class选择器>元素选择器。（如果元素选择器中有元素的值加了！importent改变优先级，则其优先）。

7、内联样式 > 内部样式 > 外部样式 > 浏览器默认样式（可通过！importent改变优先级）。

8、若重复定义样式，则谁后用谁。

9、选择器比较：

​ 1）Id 与class：1.都是元素的属性值 2.都区分大小写；但 id作用在一个元素上，class可以作用在多个元素上。

​ 2）Class与元素（标签）：都可以作用多个元素；但是，1. class区分大小写，元素不区分大小写 2. class可自定义，元素是html元素 3. class可适配多个不同元素，元素只能适配同一元素。

​ 3）后代与子元素：1. 都可适配多个元素 2. 都可以使用元素作为选择器的一部分；但子元素只能适配直接子元素，后代可以适配所有被包裹的元素

二、心得体会

​ 学习内容比较多，比较碎，不知道什么时候用什么，怎么用，课听的比较模糊，做题的时候不知道该怎么做，能想通原理和做法，但是实现不了，而且容易出现问题，不会解决，找不到问题所在。

三、疑难问题

1、对浮动和定位的应用不是很清楚，不会用。

2、动画的效果混合不怎么会用。