LAPTOP-J6J2CAOQ_20210524 李霞英

日志

一、知识总结

1.transform
transform的属性值
值名称 描述
none 不进行转换。
translate(x,y) 2D 转换。移动
translate3d(x,y,z) 3D 转换。父元素 transform-style: preserve-3d;
scale3d(x,y,z) 3D 缩放转换。
skew(x-angle,y-angle) 沿着 X 和 Y 轴的 2D 倾斜转换。
rotate(angle) 2D 旋转,在参数中规定角度。
rotate3d(x,y,z,angle) 3D 旋转。
  1. ##### 过渡(transition)

属性:
property 指定属性的name。
duration transition:效果的时间。
timing-function :效果的转速曲线。
delay :效果开始前的延迟。

transition-timing-function 常用的值有:
linear: 规定以相同速度开始至结束的过渡效果
ease :规定慢速开始,然后变快,然后慢速结束的过渡效果。
ease-in :规定以慢速开始的过渡效果。
ease-out: 规定以慢速结束的过渡效果。
ease-in-out: 规定以慢速开始和结束的过渡效果。

3.布局

常用的布局有正常布局,CSS 表格布局,多列布局三种。
浮动(float):

清楚浮点的方式有:

方式(1):clear

有三个值:

left :停止任何活动的左浮动。
right :停止任何活动的右浮动。
both :停止任何活动的左右浮动。

方式(2):

如果有浮动,需要定义一个父容器,并且要定义父容器宽和高。

4.常见的定位方式有

静态定位(static)

相对定位( position:relative)

绝对定位(position:absolute)

固定定位(fixed):

​ 固定定位与绝对定位的工作方式完全相同,主要区别在于:绝对定位固定元素是相对
于 元素或其最近的定位祖先,而固定定位固定元素则是相对于浏览器视口本身。

粘性定位(position: sticky):
是相对定位和固定定位相结合的定位方式,它允许被定位的元素表现得像相对定位一样,直到它滚动到某个阈值点(例如,从视口顶
部起10像素)为止,此后它就变得固定了。

二、心得体会

今天学习的一些内容的属性以及属性的值,我不太会应用,在练习过程中有些可以运行成功,有些运行了不显示结果,尤其是动画方面的知识,在浮动方面的知识掌握程度比较好,在定位方面的内容掌握不太好。

三、疑问

1.relativea和absolute的区别?

标签

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