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、动画的效果混合不怎么会用。

标签

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