浮动、定位、过渡、动画

---

前言

CSS提供了三种传统的布局方式：

• 标准流
• 浮动
• 定位

CSS3中另外新加了过渡、动画的属性

---

一、浮动

float属性规定元素如何浮动，用于定位和格式化内容。
浮动最典型的应用：可以让多个块级元素一行内排列显示。

1.浮动特性

• 脱离标准普通流的控制移动到指定位置，俗称脱标。
• 浮动的盒子不再保留原先的位置
• 多个盒子设置浮动，则按照属性值一行内显示并且顶端对其排列。
• 浮动元素会具有行内块元素的特性

2.浮动布局注意点：

• 浮动和标准流的父盒子搭配（先父元素标准流排列上下，再子元素浮动排列左右）。
• 一个元素浮动了，其余兄弟元素也要浮动（只影响浮动盒子后面的标准流）。

3.浮动要素

语法：

选择器 { float ; 属性值 ; }

属性值：

属性值	效果
left	元素浮动到其容器的左侧
right	元素浮动到其容器的右侧
none	元素不会浮动（将显示在文本中刚出现的位置，默认值）
inherit	元素继承其父级的float值

示例：

.box {
  float: left;
  width: 33.33%;
  padding: 50px;
}

效果：

4.清除浮动

clear 属性指定哪些元素可以浮动于被清除元素的旁边以及哪一侧。

属性值	含义
none	允许两侧都有浮动（默认）
left	左侧不许有
right	右侧不许有
both	左右两侧都不许有
inherit	元素继承其父级的clear值

需要清除浮动三种情况：

• 父级没高度
• 子盒子浮动
• 影响下面布局

清除浮动的方法：

方式	优点	缺点
额外标签法/隔墙法	通俗易懂，书写方便	结构化较差，无意义标签较多
父级overflow:hidden;	书写简单	溢出隐藏
父级after伪元素	结构语义化正确	兼容性不好
父级双伪元素	结构语义化正确	兼容性不好

特例（溢出问题）：

.clearfix {
  overflow: auto;
}
.img2 {
  float: right;
}

二、定位

position 属性规定应用于元素的定位方法的类型
（ stasic、relative、 fixed、 absolute、sticky）

1.定位组成

定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。

定位=定位模式+边偏移

定位模式用于指定一个元素在文档中的定位方式。有static、relative、absolute、fixed四个属性。

边偏移则决定了该元素的最终位置。有top、bottom、left、right四个属性。

2.静态定位static (了解）

HTML 元素默认情况下的定位方式为 static（静态），即无定位。

• position: static; 的元素不会以任何特殊方式定位；它始终根据页面的正常流进行定位
• 静态定位的元素不受 top、bottom、left 和 right 属性的影响。

语法：

选择器 { position ：static ；}

3.相对定位relative (重要)

position:relative;的元素相对于其正常位置进行定位。

语法：

选择器 { position ： relative ；}

设置相对定位的元素的 top、right、bottom 和 left属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。

示例：

div.relative {
  position: relative;
  left: 30px;
  border: 3px solid pink;
}

4.固定定位fixed (重要）

position:fixed;的元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。

• top、right、bottom 和 left 属性用于定位此元素。
• 固定定位的元素不会在页面中通常应放置的位置上留出空隙。

语法：

选择器 { position ： fixed ； }

示例：

div.fixed {
  position: fixed;
  top:50px;
  left:30px;
  width: 300px;
  border: 3px solid pink;
}

5.绝对定位absolute（重要）

position: absolute; 的元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如 fixed）。

特点：

• 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位。
• 如果祖先元素有定位（relative、absolute、fixed），则以最近一级的有定位的祖先元素作为参考点来移动位置。
• 绝对定位不再占原来的位置。

语法：

选择器 { position ：absolute ；}

示例：

div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid pink;
}

加了定位的盒子就不能用 margin: 0 auto; 来使盒子水平居中
解决办法：

1.水平

选择器 { left: 50%;
         margin-left:-(盒子宽的一半）;
         }

2.垂直

选择器 { top: 50%;
         margin-top:-(盒子宽的一半）;
         }

6.粘性定位sticky（了解)

position: sticky; 的元素根据用户的滚动位置进行定位。

特点：

• 以浏览器的可视窗口为参照点移动。
• 占有原先的位置。
• 必须添加top、left、right、bottom其中一个才有效。
• 兼容性差，IE不支持

语法：

选择器 { position ：sticky ；top ：10px；}

7.子绝父相

子级使用绝对定位，父级则需要相对定位。

• 自己绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
• 父盒子需要加定位限制子盒子在父盒子内显示。
• 父盒子布局时，需要占有位置，因此父亲只能是相对定位。

8.定位叠放次序

用z-index属性定义层叠关系。position 的层叠是按顺序层叠的，不过可以通过设置 z-index 来改变层叠顺序，只有 relative，absolute，fixed 可以设置 z-index。

选择器 { z-index ： 1；}

• 数值可以为正整数、负数或0，默认为auto，数值越大，盒子越靠前。
• 若属性值相同，则按书写顺序，就近原则。
• 数字不加单位
• 只有定位的盒子才有z-index属性。

三、过渡

CSS 过渡（transition）允许您在给定的时间内平滑地改变属性值。经常和：hover一起，搭配使用。

语法：

transition:要过渡的时间 花费时间 运动曲线 何时开始;

1.过渡效果：

transition-property 属性规定应用过渡效果的 CSS 属性的名称。（当指定的 CSS 属性改变时，过渡效果将开始）宽度、高度、背景颜色、内外边距，所有属性用all表示。
注意：
过渡效果通常在用户将鼠标指针浮动到元素上时发生。

2.过渡时间

transition-duration 属性规定完成过渡效果需要花费的时间（以秒或毫秒为单位，必须写）

3.运动曲线

transition-timing-function属性规定过渡效果的速度曲线。该属性允许过渡效果随着时间来改变其速度。默认值为ease（可省）。

• ease–逐渐慢下来
• linear–匀速
• ease-in–加速
• ease-out–减速
• ease-in-out–先加速后减速
• cubic-bezier（n，n，n，n)–允许在三次贝塞尔函数中定义自己

4.开始时间

transition-delay 属性规定过渡效果何时开始。
单位为秒/s（必须写），默认为0s

综合示例：

div {
  width: 100px;
  height: 100px;
  background: skyblue;
  transition-property: width height;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 1s;
}

过渡前:

过渡后：

四、动画

CSS 可实现 HTML 元素的动画效果，而不使用 JavaScript 或 Flash！动画使元素逐渐从一种样式变为另一种样式，您可以随意更改任意数量的 CSS 属性。
制作动画分为两步：
1.先定义动画
2.再使用动画。

语法：

animation: name duration timing-function delay iteration-count direction;

1.@keyframes规则

通过 @keyframes 规则，您能够创建动画。

创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。在动画过程中，您能够多次改变这套 CSS 样式。

• 以百分比来规定改变发生的时间，或者通过关键词 “from” 和 “to”，等价于 0% 和 100%。
• 0% 是动画的开始时间，100% 动画的结束时间。
• 为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

语法：

@keyframes animation-name {
0% {
属性：值; }
100% {
属性：值；}
}

2.等待开始时间

animation-delay 属性定义动画何时开始，其值以秒或毫秒计，允许负值。例:-2s 使动画马上开始，但跳过 2 秒进入动画。

值	描述
time	开始前等待时间，默认为0

3.播放情况

animation-direction 属性定义是否应该轮流反向播放动画。

• animation-direction 值是 “alternate”，则动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放。
• 如果把动画设置为只播放一次，则该属性没有效果。

值	描述
normal	默认值，正常播放
alternate	轮流反向播放

4.播放时间

animation-duration 属性定义动画完成一个周期所需要的时间，以秒或毫秒计。

值	描述
time	规定完成动画所花费时间，默认为0

5.填充效果

animation-fill-mode 属性规定动画在播放之前或之后，其动画效果是否可见。其属性值是由逗号分隔的一个或多个填充模式关键词。

语法：

animation-fill-mode : none | forwards | backwards | both;

值	描述
none	不改变默认
forwards	完成后，保持最后一个属性值
backwards	显示前，应用开始属性
both	向前和向后填充模式都被应用

6.播放次数

animation-iteration-count 属性定义动画的播放次数。

值	描述
n	播放n次
infinite	无限次播放

7.动画名字

animation-name 属性为 @keyframes 动画规定名称。
始终需要规定 animation-duration 属性，否则时长为 0，就不会播放动画了。

8.运行和暂停

animation-play-state 属性规定动画正在运行还是暂停。

值	描述
paused	暂停
running	播放

9.播放速度

animation-timing-function 规定动画的速度曲线。

速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。速度曲线用于使变化更为平滑。

值	描述
ease	以低速开始，然后加快，在结束前变慢。（默认）
linear	匀速
ease-in	加速
ease-out	减速
ease-in-out	以低速开始和结束。
cubic-bezier（n，n，n，n)	允许在三次贝塞尔函数中定义自己，可能的值是从 0 到 1 的数值。

综合示例：

div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}

效果大致如下：
颜色不断变换，无限循环下去
1.

4.