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

---

一、浮动（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）

感谢您的浏览！