LAPTOP-IPHRD493_实习日志 0524 廖思雨

实习日志 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
非浮动元素的外边距不能用于它们和浮动元素之间来创建空间

学习心得

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

标签

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1