20210524-程帆帆

日志

一、知识总结

1、transform:将元素2D、3D转换

值:

(1)none:不转换

(2)translate(x,y):2D转换 移动

(3)translate3d(x,y,z):3D 转换

​ :父元素transform-style:preserve-3d;

(4)translateX(x) :X 轴的值

(5)translateY(y) : Y 轴的值

(6)translateZ(z) Z 轴的值

​ (7) scale(x[,y]) : 2D 缩放转换

​ (8) scale3d(x,y,z) : 3D 缩放转换

(9) rotate3d(x,y,z,angle) : 3D 旋转 单位:deg

(10) rotateX(angle): X 轴3D 旋转

(11) rotateY(angle) :Y 轴的 3D 旋转

(12) rotateZ(angle) : Z 轴的 3D 旋转

2、transition过渡效果

属性

(1)transition-property:CSS属性的名称、效果
(2)transition-duration transition:效果完成时间
(3)transition-timing-function :transition效果的转速曲线
(4)transition-delay :效果的开始

3、动画

(1)animation-name :选择器关键帧名称

(2)animation-duration :动画完成的时间

(4)animation-timing-function :动画的一个周期

(5)animation-delay :动画开始前的延迟间隔

(6)nimation-iteration-count:动画播放次数

(7)infinite: 无限次

(8)animation-direction :是否轮流反向播放动画

(9)animation-play-state :动画正在运行或已暂停

4、排版(布局)

​ 1> 正常布局流属性

​ (1)float:浮动(多列布局)

​ (2)clear:(both/left/right)清楚浮动

​ 2> clear值:
​ left :停止任何活动的左浮动
​ right :停止任何活动的右浮动
​ both :停止任何活动的左右浮动

5、定位(position)

(1) position-static:静态定位(默认)

(2)position-relative:相对定位

(3)position-absolute:绝对定位

(4)position-fixed:固定定位

(5)position-sticky:黏性定位

(7)z-index:对X轴的参考(默认情况下,定位的元素都具有z-index为auto,实际上为0)

6、优先级

样式优先级:内联样式>内部/外部样式>浏览器默认样式

不同选择器优先级:ID选择器>class选择器>标签选择器 改变优先级:!important

7、重复定义样式时:

​ 在 a.css 和 b.css 中使用相同的选择器都定义了对于某个元素的样式属性时,那么谁在后边元素适配谁。

8、选择器比较
(1)Id :元素的属性值 ,区分大小写 ,作用在一个元素上
(2)Class :元素的属性值,区分大小写,可自定义,可适配多个不同元素
(3)元素标签:不区分大小写,只能适配同一元素,可以作用多个元素
(4)后代子元素:可适配多个元素,可以使用元素作为选择器的一部分,可以适配所有被包裹的元素

二、心得体会

今天的学习是我真正意义上自己理解,练习题相对来说比较简单,单独练习,算是这五天里面最充实的一天吧。

标签

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