日志

一、知识总结

1-1 transform

该属性用于元素的2D和3D转换，这个属性容许将属性旋转，缩放，移动，倾斜等。
none 定义不进行转换。
translate(x,y) 2D 转换。移动
translateX(x) 只是用 X 轴的值。
translateY(y) 只是用 Y 轴的值。
translateZ(z) 只是用 Z 轴的值。
rotate3d(x,y,z,angle) 3D 旋转。
rotateX(angle) 沿着 X 轴的 3D 旋转。
rotateY(angle) 沿着 Y 轴的 3D 旋转。
rotateZ(angle) 沿着 Z 轴的 3D 旋转。

1-2 transition

设置元素的过渡效果。

transition-property 指定CSS属性的name，transition效果
transition-duration transition效果需要指定多少秒或毫秒才能完成
transition-timing-function 指定transition效果的转速曲线
transition-delay 定义transition效果开始的时候

1-3 动画

动画属性可以逐渐地从一个值变化到另一个值，比如大小、数量

百分百和颜色。

animation-name 指定要绑定到选择器的关键帧的名称
animation-duration 动画指定需要多少秒或毫秒完成

animation-timingfunction 设置动画将如何完成一个周期
animation-delay 设置动画在启动前的延迟间隔。
animation-iterationcount 定义动画的播放次数。infinite 无限次

1-4浮动

float 属性最初只用于在成块的文本内浮动图像，但是现在它已成为在网页上创建多列布局的最常用
工具之一。

body {
width: 90%;
max-width: 900px;
margin: 0 auto;
}
p {
line-height: 2;
wo

1-5定位

1-5-1静态定位
静态( staitc )定位是每个元素获取的默认值——它只是意味着“将元素放入它在文档布局流中的正常
位置 ——这没有什么特别的。
如果所有的父元素都没有显式地定义 position 属性，那么所有的父元素默认情况下 position 属性
都是 static 。

1-5-2 相对定位
相对定位与静态定位非常相似，占据在正常的文档流中，除了你仍然可以修改它的最终位置，包括让它
与页面上的其他元素重叠。
给元素加上 position:relative; 并不会改变元素的位置，需要使用 top ， bottom ， left 和
right 属性。

1-5-3绝对定位

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

1-6 优先级

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

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

二、心得体会

今天学习的内容比较多，知识点也比较难，感觉学习的成果也不是太好，很多东西自己独立做的话也做不出来，没有思路，需要与同学交流，才能做出来，一天天的很累，所吸收的知识也不多，感觉这几天学习的效果不是太好。没有学到知识，都只对一些基础的东西了解。感觉编代码这方面，自己还是不喜欢，提不起来兴趣，学习成果不好。