日志4

一、知识总结

transform

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

transition

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

（1）transition-property 指定CSS属性的name，transition效果

（2）transition-duration transition效果需要指定多少秒或毫秒才能完成

（3）transition-timing-function 指定transition效果的转速曲线

（4）transition-delay 定义transition效果开始的时候

动画

动画属性可以逐渐地从一个值变化到另一个值，比如尺寸大小、数量、百分比和颜色

布局（排版）

CSS页面布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。在这将涉及更多关于页面布局技术的细节：
（1）正常布局流
（2）display 属性
（3）弹性盒子
（4）网格
（5）浮动
（6）定位
（7）CSS 表格布局
（8）多列布局
每种技术都有它们的用途，各有优缺点，相互辅助。

正常布局流（Normal flow）

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

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

浮动

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

2.浮动元素 会脱离正常的文档布局流，并吸附到其父容器的左边。在正常布局中位于该浮动元素之下的内容，此时会围绕着浮动元素，填满其右侧的空间。

清除浮动

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

2.clear 可以取三个值：
（1）left ：停止任何活动的左浮动
（2）right ：停止任何活动的右浮动
（3）both ：停止任何活动的左右浮动

3.总结

（1）脱离文档流，不占原来的文档流位置。
（2）浮动元素在父元素中所占的面积的有效高度为0。
（3）非浮动元素的外边距不能用于它们和浮动元素之间来创建空间。

定位

1.定位( position )允许您从正常的文档流布局中取出元素，并使它们具有不同的行为，例如放在另一个元素的上面，或者始终保持在浏览器视窗内的同一位置。

2.静态定位：静态( staitc )定位是每个元素获取的默认值——它只是意味着“将元素放入它在文档布局流中的正常位置

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

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

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

二、心得体会

​ 今天课程内容较多，理解起来也比较困难，任务也比较重。

​

​