响应页面设计5

定位

更改元素的相对位置
当元素的定位设置为 relative 时，它允许你通过 CSS 指定该元素在当前文档流页面下的相对偏移量。把元素的位置设置成相对，并不会改变该元素在布局中所占的位置，也不会对其它元素的位置产生影响。

绝对定位
position 属性的取值选项 absolute，它的含义是相对于其包含块定位。 和 relative 定位不一样，绝对定位会将元素从当前的文档流里面移除，周围的元素会忽略它。 这样就可以用 CSS 的 top、bottom、left、right 属性来调整元素的位置。

固定定位
fixed 定位，它是一种特殊的绝对（absolute）定位，将元素相对于浏览器窗口定位。 类似于绝对位置，它与 CSS 偏移属性一起使用，并且也会将元素从当前的文档流里面移除。 其它元素会忽略它的存在，这样也许需要调整其他位置的布局。但 fixed 和 absolute 的最明显的区别在于，前者定位的元素不会随着屏幕滚动而移动。

浮动

float属性
浮动元素不在文档流中，它向 left 或 right 浮动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 通常需要用 width 属性来指定浮动元素占据的水平空间。

z-index 属性更改重叠元素的位置
当一些元素在位置上重叠时（例如，使用 position: absolute | relative | fixed | sticky 时），在 HTML 里后出现的元素会默认显示在更早出现的元素的上面。 你可以使用 z-index 属性指定元素的堆叠次序。 z-index 的取值是整数，数值大的元素会叠放到数值小的元素上面。

margin 属性将元素水平居中
在应用设计中经常需要把一个块级元素水平居中显示。 一种常见的实现方式是把块级元素的 margin 值设置为 auto。
同样的，这个方法也对图片奏效。 图片默认是内联元素，但是可以通过设置其 display 属性为 block来把它变成块级元素。

色彩

CSS 线性渐变
HTML 元素的背景色并不局限于单色。 CSS 还为我们提供了颜色渐变。 可通过 background 里的 linear-gradient() 实现线性渐变， 以下是它的语法：

background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));

第一个参数指定了颜色过渡的方向——它的值是角度，90deg 表示垂直渐变（从左到右），45deg 表示沿对角线渐变（从左下方到右上方）。 其他参数指定了渐变颜色的顺序。

通过添加细微图案作为背景图像来创建纹理
background 属性支持使用 url() 函数作为属性值，这让我们可以通过链接的方式引入纹理或样式的图片。 图片链接的地址应写在括号内，一般会用引号包起来。

Transform 属性

CSS Transform scale 属性可以更改元素的大小
transform 里面的 scale() 函数可以用来改变元素的显示比例,如：

p {
  transform: scale(2);
}

CSS Transform scale 属性在悬停时缩放元素

transform 属性有很多函数可以调用，可以对元素进行调整大小、移动、旋转、翻转等操作。 当使用伪类选取元素的指定状态（如 :hover）时，我们可以通过 transform 属性非常方便地给元素添加交互。
当用户悬停在段落元素时，段落大小缩放到原始大小几倍，如：

p:hover {
  transform: scale(2.1);
}

CSS Transform skex 属性沿X轴倾斜元素
transform 属性是 skewX()：它使选择的元素沿着 X 轴（横向）倾斜指定的角度。如：

p {
  transform: skewX(24deg);
}

CSS Transform skex 属性沿Y轴倾斜元素

skewX 函数使指定元素沿 X 轴翻转指定的角度，想必你已经猜到了，skewY 属性使指定元素沿 Y 轴（垂直方向）翻转指定角度。如：

p {
	transform: skewY(10deg);
}

图形

CSS 的关键帧和动画是如何工作的
animation 属性以及 @keyframes 规则。 animation 属性控制动画的外观，@keyframes 规则控制动画中各阶段的变化。 总共有 8 个 animation 属性。
animation-name 用来设置动画的名称，也就是我们稍后要在 @keyframes 里用到的名称。animation-duration 设置动画所花费的时间。
如：

#anim {
  animation-name: colorful;
  animation-duration: 3s;
}

@keyframes colorful {
  0% {
    background-color: blue;
  }
  50% {
    background-color: green;
  }
  100% {
    background-color: yellow;
  }
}

在动画开始时（0%）的背景颜色为蓝色，在动画结束时（100%）的背景颜色为黄色。 注意我们不只可以设置开始和结束，而是从 0% 到 100% 间的任意位置都可以设置。

使用CSS动画更改按钮的悬停状态
如：

<style>
  img {
    width: 30px;
  }
  img:hover {
    animation-name: width;
    animation-duration: 500ms;
  }

  @keyframes width {
    100% {
      width: 40px;
    }
  }
</style>

如果想要的效果是按钮在悬停时始终高亮，可以通过把 animation-fill-mode 设置成 forwards 来实现。 animation-fill-mode 指定了在动画结束时元素的样式：

animation-fill-mode: forwards;

使用户把鼠标悬停在按钮上时，按钮保持高亮。

使用 CSS 动画创建动画
在元素的 position 已有指定值（如 fixed 或者 relative）时，CSS 偏移属性 right、left、top、bottom 可以用在动画规则里创建动作。
如：

@keyframes rainbow {
  0% {
    background-color: blue;
    top: 0px;
  }
  50% {
    background-color: green;
    top: 50px;
  }
  100% {
    background-color: yellow;
    top: 0px;
  }
}

从左到右淡化元素来创建视觉方向
动画元素的 opacity 属性值，使其在到达屏幕右侧时渐隐。如：

	opacity :0.1;

使用无限的动画计数制作永不停止的动画
animation-iteration-count，这个属性允许你控制动画循环的次数。如：

animation-iteration-count: 3;

在这里动画会在运行 3 次后停止，如果想让动画一直运行，可以把值设置成 infinite。