0524-朱鹏新

日志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 固定定位,这与绝对定位的工作方式完全相同,只有一个主要区别:绝对定位固定元素是相对于元素或其最近的定位祖先,而固定定位固定元素则是相对于浏览器视口本身。

二、心得体会

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

标签

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