前端浮动、定位、过渡、动画学习总结

一、浮动（Float）

1.什么是浮动？

float属性用于创建浮动框，将其移到一边，直到左边缘或右边缘及包含块或另一个浮动框的边缘。
语法：

选择器 { float ： 属性值； }

属性值	描述
none	元素不浮动【默认值】
left	元素向左浮动
right	元素向右浮动
inherit	元素继承父级的浮动属性值

举例：

<div class="none">默认不浮动</div>
<div class="left">左浮动</div>
<div class="right">右浮动</div>
<div class="inherit">
    <div class="child-1">继承父级的浮动属性</div>
</div>

页面显示：

补充：
标准流
标准流（normal flow），也被称为文档流，是指在不借助任何特殊的css排列规则元素的排布规则。

2.浮动的特性

1. 脱离标准普通流的控制（浮）移动到指定位置（动）。（俗称脱标）
2. 浮动的盒子不再保留原先的位置（会出现加了float属性的盒子叠在未添加float属性的盒子的上面）
3. 如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列。（注意：浮动的元素是互相贴在一起的即无缝隙，如果父级宽度装不下这些带浮动属性的盒子时，多出的盒子会另起一行对齐。）
4. 浮动元素具有行内块元素的特性。（任何元素都可以浮动，不管原先是何种模式的元素，添加浮动之后具有行内块元素相似特性。即行内元素加了浮动则不需要加上转换为行内块元素就可以直接设置宽、高。）

3.如何约束浮动的位置

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。

4.使用浮动的注意点

（1）浮动和标准流的父盒子搭配
（2）一个元素浮动了，理论上其余的兄弟元素也要浮动
【浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流】。

5.清除浮动【重难点】

（1）为什么需要清除浮动？
由于父盒子在多数情况下不方便给高度，但子盒子浮动又不占有位置，最后父盒子高度为0时，影响下面的标准流盒子。
（2）清除浮动的本质 —— 清除浮动元素造成的影响
（清除浮动之后，父级会根据浮动的子盒子自动检测高度，从而不再影响下面的标准流）
（3）语法：

选择器 { clear ： 属性值；}

属性值	描述
left	清除左侧浮动的影响
right	清除右侧浮动的影响
both	同时清除左右两侧浮动的影响
none	不清除浮动【默认值】
inherit	继承父级的清除属性值

方法：

（1）受影响的元素加clear：both（常用）

         <h3 style="clear:both">第二行</h3>

（2） 浮动元素的父元素加overflow:hidden;或者overflow:auto;(常用)

<div style="overflow:hidden">父元素</div>

（3）浮动元素后面加空div clear:both;

注意点：新的空标签必须是块级元素

<div style="clear:both"></div>

（4）父元素加height（父元素的高度已知）

（5）伪对象法（基本不使用）

浮动元素的父元素:after,
浮动元素的父元素:before {
        content:"";
        display:block;
        clear:both;
       }

菜鸟教程——content属性

二、定位（Position）

1.为什么需要定位

定位可以让盒子自由的在某个盒子内移动位置或者固定在屏幕中某个位置，并且可以压住其他盒子。

2.定位的组成

定位:将盒子定在某个位置（即摆盒子）

定位： = 定位模式 + 边偏移

2.1.定位模式

用于指定一个元素在文档中的定位方式，通过CSS的position属性来设置。

值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位
sticky	粘性定位

2.2边偏移

就是定位的盒子移动到最终位置。

边偏移属性	示例	描述
top	top：80px	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	bottom：80px	底端偏移量，定义元素相对于其父元素下边线的距离
left	left：80px	左端偏移量，定义元素相对于其父元素左边线的距离
right	right: 80px	右端偏移量，定义元素相对于其父元素右边线的距离

3.五类定位、举例

3.1 静态定位 static

       静态定位是元素的默认定位方式，即无定位。

语法：

  选择器  { position：static；}

特点：无边偏移；少使用。

3.2 相对定位 relative

相对定位是元素在移动位置的时候，相对于它原来的位置来说的。（不脱标）
语法：

选择器  { position：relative；}

特点：
1.参照点是自己原来的位置；
2.原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。
举例：

.first-two {
    background-color: pink;
    position: relative;
    top: 20px;
    left : 100px;
}

页面显示：

3.3 绝对定位 absolute

绝对定位是元素在移动位置的时候，相对于它祖先元素来说的。（脱标）
语法：

选择器  { position：absolute；}

特点：
1.如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document文档）。
2.如果祖先元素有定位（相对，绝对，固定定位），则以最近一级的有定位祖先元素作为参考点移动位置。
3.绝对定位不占有原先的位置（脱标）。

3.4 固定定位 fixed

固定定位是元素固定于浏览器可视区的位置，即在浏览器滚动时元素的位置不会改变。
语法：

选择器  { position：fixed；}

特点：
1.以浏览器的可视窗口为参照点移动元素；
●跟父元素没有任何关系；
●不能随滚动条滚动；
2.固定定位不再占有原先的位置；
●固定定位也是脱标的，可视为一种特殊的绝对定位。

3.5 粘性定位 sticky

粘性定位可以被认为是相对定位和固定定位的混合。
基于用户的滚动位置来定位。

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

语法：

选择器  { position：sticky；}

特点：
1.以浏览器的可视窗口为参照点移动元素（固定定位的特点）
2.粘性定位占有原先的位置（相对定位的特点）
3.必须添加top，left，right，bottom其中一个才有效（否则等同于相对定位）

4.补充——“子绝父相”

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

三、过渡（transition）

1.基本介绍

过渡是元素从一种样式逐渐改变为另一种的效果。

要实现这一点，必须规定两项内容：
1.指定要添加效果的CSS属性
2.指定效果的持续时间。

语法：

选择器 {
	transition:width 1s;
}

选择器:hover {
	width:300px;
}

2.属性

3.过渡速度曲线

transition-timing-function 属性规定过渡效果的速度曲线。
transition-timing-function 属性可接受以下值：

• ease - 规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认）
• linear - 规定从开始到结束具有相同速度的过渡效果
• ease-in -规定缓慢开始的过渡效果
• ease-out - 规定缓慢结束的过渡效果
• ease-in-out - 规定开始和结束较慢的过渡效果
• cubic-bezier(n,n,n,n) - 允许您在三次贝塞尔函数中定义自己的值

4.transition多属性简写

语法：

选择器 {
	transition : 属性名称 持续时间 速度曲线 延迟时间;
}

四、动画（animation）

1. 什么是 CSS 动画？

动画使元素逐渐从一种样式变为另一种样式。
可以随意更改任意数量的 CSS 属性。
如需使用 CSS 动画，必须首先为动画指定一些关键帧。
关键帧包含元素在特定时间所拥有的样式。

2. @keyframes 规则

如果在 @keyframes 规则中指定了 CSS 样式，动画将在特定时间逐渐从当前样式更改为新样式。

要使动画生效，必须将动画绑定到某个元素。

3.举例

@keyframes example {
    from {
        background-color: red;
    }
    to {
        background-color: yellow;
    }
  }
  
  /* 向此元素应用动画效果 */
  .first {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
  }

注意：animation-duration 属性定义需要多长时间才能完成动画。如果未指定 animation-duration 属性，则动画不会发生，因为默认值是 0s（0秒）。

在上面的例子中，通过使用关键字 “from” 和 “to”（代表 0％（开始）和 100％（完成）），我们设置了样式何时改变。

还可以使用百分比值。通过使用百分比，可以根据需要添加任意多个样式更改。

4.属性

属性	描述
@keyframes	规定动画模式
animation	设置所有动画属性的简写属性
animation-delay	规定动画开始的延迟
animation-direction	定动画是向前播放、向后播放还是交替播放。
animation-duration	规定动画完成一个周期应花费的时间。
animation-fill-mode	规定元素在不播放动画时的样式（在开始前、结束后，或两者同时）。
animation-iteration-count	规定动画应播放的次数。
animation-name	规定 @keyframes 动画的名称。
animation-play-state	规定动画是运行还是暂停。
animation-timing-function	规定动画的速度曲线。

4 .1 animate-direction更多属性

animation-direction 属性可接受以下值：

• normal - 动画正常播放（向前）。默认值
• reverse - 动画以反方向播放（向后）
• alternate - 动画先向前播放，然后向后
• alternate-reverse - 动画先向后播放，然后向前

4.2 animation-fill-mode补充

CSS 动画不会在第一个关键帧播放之前或在最后一个关键帧播放之后影响元素。animation-fill-mode 属性能够覆盖这种行为。

在不播放动画时（在开始之前，结束之后，或两者都结束时），animation-fill-mode 属性规定目标元素的样式。

animation-fill-mode 属性可接受以下值：

• none - 默认值。动画在执行之前或之后不会对元素应用任何样式。
• forwards - 元素将保留由最后一个关键帧设置的样式值（依赖 animation-direction 和 animation-iteration-count）。
• backwards - 元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在动画延迟期间保留该值。
• both - 动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。

5.简写

div {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
div {
  animation: example 5s linear 2s infinite alternate;
}

animate动画库
本文章为作者得前端学习总结笔记