一、日志

1、知识总结

transform(动态效果)

（1）常用的值：

none 定义不进行转换。
translate(x,y) 定义 2D 转换。移动
translate3d(x,y,z) 定义 3D 转换。父元素 transform-style: preserve-3d;
translateX(x) 定义转换，只是用 X 轴的值。
translateY(y) 定义转换，只是用 Y 轴的值。
translateZ(z) 定义转换，只是用 Z 轴的值。
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 旋转。

（2）设置元素当过渡效果：

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

布局

 正常布局流(normal flow)是指在不对页面进行任何布局控制时，浏览器默认的HTML布局方式。

浮动 （float）

多列浮动

清除浮动（clear）

clear 可以取三个值：
left ：停止任何活动的左浮动
right ：停止任何活动的右浮动
both ：停止任何活动的左右浮动

定位（position）

（1）静态定位 ( staitc )：静态( staitc )定位是每个元素获取的默认值。

（2）相对定位 ： 给元素加上 position:relative; 并不会改变元素的位置，需要使用 top ， bottom ， left 和
right 属性。

（3）绝对定位： position:absolute; 生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。

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

优先级

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

（3）浮动

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

body {
width: 90%;
max-width: 900px;
margin: 0 auto;
}
p {
line-height: 2;
word-spacing: 0.1rem;
}

清除浮动:clear 属性，当你把这个应用到一个元素上时，它主要意味着"此处停止浮动"——这个元素和源码中
后面的元素将不浮动，除非将一个新的 float 声明应用到此后的另一个元素。

footer {
clear: both;
}

(4)定位

静态定位:如果所有的父元素都没有显式地定义 position 属性，那么所有的父元素默认情况下 position 属性
都是 static 。

相对定位:给元素加上 position:relative; 并不会改变元素的位置，需要使用 top ， bottom ， left 和
right 属性。

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

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

二、心得体会

23号，结束了关于css的学习，总体内容多，之前学的有的忘记了，下来自己会加强练习。