【初入前端】第四课课前预习

文章目录

一、浮动（float）
- 1、什么是浮动
- 2、浮动的特性
- 3、与标准流父级搭配使用
- 4、清除浮动
二、定位
- 1.引入
- 2.定位组成
- 3.叠放次序
- 4.拓展
- 5.元素的显示与隐藏
三、过渡
四、动画
- 1. 2D转换
- 2. 动画

一、浮动（float）

1、什么是浮动

css提供的三种传统布局方式：普通流（标准流）、浮动和布局；
多个块级元素纵向排列找标准流，横向排列找浮动；
float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘；
语法如下：

选择器 { float:属性值; }

2、浮动的特性

特性1

脱离标准流的控制移动到指定位置，俗称脱标
浮动的盒子不再保留原先的位置

特性2

若多个盒子都设置了浮动，则他们会按照属性值一行内显示并且顶端对齐排列
浮动的元素无缝隙，若父级宽度装不下，多出的盒子另起一行对齐

特性3

浮动元素会具有行内块元素特性
块级盒子添加浮动后，默认宽度根据内容来定
行内元素添加浮动后，可设置宽高

3、与标准流父级搭配使用

与标准流父级搭配使用法则：

先用标准流的父元素排列上下位置
之后内部子元素采取浮动排列左右位置
浮动的盒子只影响浮动盒子后面的标准流，不影响前面的标准流

4、清除浮动

本质：清除浮动元素脱离标准流造成的影响
策略：闭合浮动
语法：

选择器 { clear：属性值; }
属性值包含left、right、both, 几乎只用clear：both

I. 额外标签法

在浮动元素末尾添加一个空标签，例如：

<div style="clear:both"></div>
或 <div class="clear"></div> + style中设置clear属性

新的空标签必须是块级元素

II. 父级添加overflow法

为父级添加overflow属性

选择器 { overflow：hidden/auto/scroll; }

无法显示溢出的部分

III. ：after伪元素法

.clearfix:after {content:"";        --固有属性display:block;     --转换为块元素height:0;clear:both;         --清除浮动visibility:hidden;
}
.clearfix { *zoom:1; }         --照顾低版本浏览器

IV. 双伪元素清除浮动法

.clearfix:after,.clearfix:after {content:"";        display:table;
}
.clearfix:after { clear:both; }
.clearfix { *zoom:1; }

总结

二、定位

1.引入

浮动经常用于横向排列盒子
定位可以让盒子自由在某盒子中移动或固定屏幕中某个位置，并且压住其他盒子
定位=定位模式+边偏移

2.定位组成

I. 定位模式：决定元素的定义方式，通过css的position属性来设置，其值如下： 静态定位

用法：选择器 { position:static; }
按照标准流特性摆放位置，没有边偏移
在布局中很少用到

相对定位

用法：

box1 {position:relative;right:80px;     --边偏移 右移80px
}

移动位置的参照点是原来的位置
原来在标准流的位置继续占有

绝对定位

用法：选择器 { position:absolute; }
子绝父相：
- 子级绝对定位，不会占有位置，可以放到父盒子里的任何一个地方
- 父盒子需要加定位限制子盒子在父盒子内显示
- 父亲为相对定位

固定定位

用法：选择器 { position:fixed; }
固定于浏览器可视区的某位置
与父元素无关
不随滚动条滚动
不占有原先的位置，特殊的绝对定位
固定在版心右侧
- 先left走浏览器宽度的一半
- margin-left走版心宽度的一半

II. 边偏移就是定位的盒子移动到最终位置，有top、bottom、left、right 四个属性

3.叠放次序

语法：选择器 { z-index:1; }
z-index 数值大，盒子越靠上
数值相同，后来者居上

4.拓展

加了绝对定位的盒子不能用margin:auto 0设置水平居中
- 先left走父宽度的一半
- 再走margin 负值走自己盒子宽度的一半
绝对定位和固定定位特殊性质与浮动类似

5.元素的显示与隐藏

I. display（use more）

display：none；隐藏对象
display：block；除了转化为块级元素外，还能显示元素
display隐藏元素后，不再占有原来的位置

II. visibility

visibility：visible；元素可视
visibility：hidden；隐藏对象
display隐藏元素后，还占有原来的位置

II. overfolw溢出（慎用）

overfolw：visible；元素可视
overfolw：hidden；隐藏超出部分内容
overfolw：scroll；显示滚动条
overfolw：auto；溢出时显示滚动条
display隐藏元素后，还占有原来的位置

三、过渡

用法：

transition：要过渡的属性 花费时间 运动曲线 何时开始

1.属性：想要变化的css属性
2.花费时间：比如0.5s，单位不可省
3.运动曲线：默认ease（可省略）
4.何时开始：默认0s，可设置延迟触发时间（可省略）

<style>div {width: 200px;height: 100px;background-color: pink;transition: width .5s, height .5s;  --同时设置宽和高} div:hover {width: 400px;height: 400px;}
</style>

四、动画

动画是css3中具有颠覆性的特征之一
可通过设置多个节点来精确控制一个或者一组动画，来实现复杂的动画效果

1. 2D转换

转换（transform）可以实现元素的唯一、旋转、缩放等效果

移动：translate
- 语法：
```
transform：translate（x，y）；
transform：translateX（）；
transform：translateY（）；
```
- translate不会影响其他元素的位置
- 百分比单位是相对自身宽高来说的，如transform：translate（50%，50%）
- 设置水平垂直居中：不需使用margin和计算，用定位配合transform：translate（50%，50%）
旋转：rotate
- 语法：transform：rotate（x deg）; —表示顺时针旋转x度
- 应用：三角形
缩放：scale
- 语法：transform：scale（x,y）;
- 以1为标准，xy大于1则放大，小于1则缩小
- 只写一个数，默认等比例缩放
- 默认以中心点缩放，而不影响其他盒子

综合写法:

 transform：translate() rotate() scale();

2. 动画

I. 定义动画：

<style>    @keyframes movie {0% {transform: translateX(0px);}100% {transform:translateX(1000px);}}
</style>

II. 使用动画

<style>div {width: 200px;height: 200px;background-color: #fff;margin: 100px auto;animation-name: movie;   --动画名称animation-duration: 2s;   --持续时间}
</style>

III. 动画常用属性
简写：

animation：名称 持续时间 何时开始 播放次数 是否反方向 动画起始或结束的状态

IV. 速度曲线细节
animation-timing-function（默认ease）

感谢您的浏览！