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 来将优先级提高

二、心得总结

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

三、疑问

视频动画不会运用。

点赞