LAPTOP-4OTU37AV_0524-王锋

日志5

一、知识总结

transform**

1.transform 是 css3 的属性,该属性应用于元素的2D或3D转换。这个属性是将元素旋转,缩放, 移动,倾斜等。

2.值:

none :定义不进行转换。

translate(x,y) :定义 2D 转换。

移动 translate3d(x,y,z) 定义 3D 转换。父元素 transform-style: preserve-3d;

translateX(x) :只是用于 X 轴的值。

translateY(y) :只是用 于Z 轴的值。

translateZ(z) :只是用 于Z 轴的值。

scale(x,y) :2D 缩放转换。

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

skew(x-angle,y-angle) :沿着 X 和 Y 轴的 2D 倾斜转换。

rotate(angle) 2D :旋转,在参数中设置旋转角度。

rotate3d(x,y,z,angle) : 3D 旋转。

rotateX(angle) :沿着 X 轴的 3D 旋转。

rotateY(angle) :沿着 Y 轴的 3D 旋转。

rotateZ(angle) :沿着 Z 轴的 3D 旋转。

transition

transition 属性设置元素当过渡效果,四个属性简写为:

transition-property :指定CSS属性的name,transition效果

transition-duration:transition:效果需要多少时间才能完成

transition-timing-function :transition效果的转速曲线

transition-delay :transition效果开始

transition-timing-function 值:linear 规定以相同速度开始至结束的过渡效果。

动画(animation)

@keyframes animationName{ from {} to {} }

布局

1.默认布局流

HTML元素完全按照源码中出现的先后次序显示——第一个段落、无序列表、第二个段落

2.浮动(float)值:left、right

3.清除浮动(footer)

clear值:

​ left :停止任何活动的左浮动

​ right :停止任何活动的右浮动

​ both :停止任何活动的左右浮动

注意:脱离文档流,不占原来的文档流位置

​ 浮动元素在父元素中所占的面积的有效高度为0

​ 非浮动元素的外边距不能用于它们和浮动元素之间来创建空间

4.定位(position)

(1)静态定位(staitc)——默认

(2)相对定位——position:relative; 并不会改变元素的位置,需要使用 top , bottom , left 和 right 属性。

注意:相对定位生成相对定位的元素,相对于其正常位置进行定位

(3)绝对定位

position:absolute; 生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位。绝对定 位的元素不再存在于正常文档布局流中。

(4)固定定位

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

(5)z-infex——z轴

(6)position:sticky

二、心得体会

今天CSS的内容都学完了,感觉自己会了60%,不熟练的有30%(细节性的元素改动、添加、修改),缺少全局的定位,不能很好的定位一个项目,做出来的项目代码过于繁琐,不够精炼。这方面需要加强,因为学会了布局,小的元素使用也就不会乱成一团,不知道如何使用等情况。

标签

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