日志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%（细节性的元素改动、添加、修改），缺少全局的定位，不能很好的定位一个项目，做出来的项目代码过于繁琐，不够精炼。这方面需要加强，因为学会了布局，小的元素使用也就不会乱成一团，不知道如何使用等情况。