web全栈

、过渡效果 - transition
1、什么是过渡
使得CSS的属性值在一段时间内平缓变化的效果
2、语法
1、指定过渡属性
作用：指定哪个属性值在变化的时候使用过渡效果
属性：transition-property
取值：
1、属性名称
2、all
但凡能使用过渡效果的属性值在变化的时候一律使用过渡效果
允许使用过渡效果的属性：
1、所有与颜色相关的属性
2、所有取值为数字的属性
2、指定过渡时长
作用：指定在多长时间内完成过渡效果
属性：transition-duration
取值：以 s 或 ms 为单位的数字
1s = 1000ms
300ms = 0.3s = .3s
3、指定过渡的速度时间曲线函数(速率)
属性：transition-timing-function
取值：
1、ease
默认值，慢速开始，快速变快，慢速结束
2、linear
匀速
3、ease-in
慢速开始，加速结束
4、ease-out
快速开始，减速结束
5、ease-in-out
慢速开始和结束，中间先加速后减速
4、指定过渡延迟
属性：transition-delay
取值：以 s 或 ms 为单位的数值
5、过渡属性
属性：transition
取值：property duration timing-function delay
练习：
创建一个元素200200，红色背景
鼠标悬停时
1、尺寸变为400400
2、背景颜色变为×××
3、变成圆形
使用过渡效果在5s钟内完成以上三个效果，鼠标移除时使用过渡效果变为原来的样子
2、定位(重点)
1、什么是定位
表示的是元素在页面中的位置
2、定位的分类
在CSS中，定位能分为以下几类：
1、普通流定位(默认定位方式)
2、浮动定位(重难点)
3、相对定位
4、绝对定位
5、固定定位
3、普通流定位
普通流定位，又称为"文档流定位"。是页面中所有元素的默认定位方式。典型的 "流式布局"
特点：
1、每个元素在页面中都有自己的位置，并占据一定的页面空间
2、每个元素都是从其父元素的左上角开始排列的
3、每个元素基本上都是按照从左到右 或 从上倒下的方式排列的
块级元素：从上倒下排列，每个独占一行
行内元素 & 行内块元素：从左到右排列，显示不下的时候才换行
4、浮动定位(重难点)
1、浮动元素的特点
将元素设置为浮动定位，将具备以下特点：
1、浮动元素会被排除在文档流之外 - 脱离文档流，那么元素将不在占据页面空间
2、未浮动的元素们会上前占位
3、浮动定位的元素会停靠在父元素的左边或右边或其他已浮动元素的边缘上
4、浮动只能在当前行浮动
5、浮动解决问题：让多个块级元素能够在一行内显示
2、语法
属性：float
取值：
1、none
默认值，无任何浮动效果
2、left
浮动到父元素的左边，或停靠在左边已有的浮动元素的边缘上
3、right
浮动到父元素的右边，或停靠在右边已有的浮动元素的边缘上
3、浮动引发的特殊效果
1、如果父元素显示不下所有的已浮动子元素的话，那么最后一个将换行，但有可能被卡住
2、元素一旦浮动起来后，都将变成块级元素
行内元素们一旦浮动，就允许修改尺寸
3、元素一旦浮动起来之后，在为指定宽度的情况下，宽度将由内容来决定
4、文字，图片，行内元素是采用环绕的方式来排列的，是不会被浮动元素压在底下的