DESKTOP-AFRJOQA_20210524-高瑞瑞

0524日志

一、知识总结

1、transform:

transform:属性应用于元素的2D或3D转换

常用的值有:translate(x,y) 定义 2D 转换实现位移

​ translateX(x) 定义转换 ,以X 轴旋转

​ translateY(y) 定义转换,以 Y 轴旋转

​ translateZ(z) 定义转换,以Z 轴的旋转等

2、transition :设置元素的过渡效果

3、动画
逐渐地从一个值变化到另一个值,比如尺寸大小、数量、旋转等

​ @keyframes animationName{

​ from { }

​ to { }

​ }

4、布局(排版)

(1)正常的布局流(Normal flow)

​ HTML元素完全按照源码中出现的先后次序显示

​ 1)浮动 (float 属性)

​ 例如:float :left;

​ 2)默认情况下,子元素(这个

和两个

)将跨越整个body宽度的100%。如将两个

放在一起,那么我们需要将它们的宽度(父元素的宽度的100%)设置为更小,或者将这两个div放进一个大容器中。

(3)清除浮动:clear 属性
clear 可以取三个值:
left :停止左浮动

​ right :停止右浮动

​ both :停止左右浮动

5、定位 ( positio)

​ (1) 静态定位 :默认情况下就是静态定位( staitc )

​ (2)相对定位 : position:relative

​ (3)绝对定位 : position:relative

​ (4)固定定位:fixed

6、z-index:使用定位后,元素有可能会出现重叠现象,可以使用 z-index 属性

7、position: sticky :相对位置和固定位置的混合体

8、样式优先级

 四种样式用法的优先级:1.内联样式 (在元素 style 属性(attr)中定义的样式) 
                   2. 内部样式 (在 <style> 标签中定义的样式)
                   3. 外部样式(包含@import)

内联样式 > 内部样式 > 外部样式 > 浏览器默认样式

9、不同选择器之间的优先级

id 选择器 > class 选择器 > 元素选择器

10、改变优先级
!important 来将优先级提高

二、心得总结

今天早上的内容大概掌握了,视频部分有些运用的不好。

三、疑问

视频动画不会运用。

标签

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