实习日志 DAY 5

知识整理

布局

CSS页面布局技术可以拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。

有下列几种不同的技术：

正常布局流
display 属性
弹性盒子
网格
浮动
定位
CSS 表格布局
多列布局

他们有各自的用途，有优势也有劣势，在使用过程中是相互辅助的。

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

浮动transform：将元素旋转，缩放，移动，倾斜

transform 是 css3 的属性，该属性应用于元素的2D或3D转换。

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

动画

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

animation-timingfunction 设置动画将如何完成一个周期
animation-delay 设置动画在启动前的延迟间隔。
animation-iterationcount
定义动画的播放次数。infinite 无限次
animation-direction 指定是否应该轮流反向播放动画。

float 属性用于在网页上创建多列布局

浮动内容随着盒子模型外边距和边界。通过设置图片右侧的外边距就能阻止右侧的文字紧贴着图片。

默认子元素将跨越整个body宽度的100%。

脱离文档流，不占原来的文档流位置

浮动元素在父元素中所占的面积的有效高度为0
非浮动元素的外边距不能用于它们和浮动元素之间来创建空间

学习心得

由于昨天被发现了。今天我做的格外认真，就怕在被抓，被单独布置作业。我发现我还是有救的。做的想法有，就只差基础知识和系统化的做出来。加油，奥利给！但是我还有一个问题，就是还是不会嵌套，要么嵌套的时候就出各种各样的问题。果然是只要留问题，这个问题就会在以后天天困住自己。