text-align属性

text-align 属性可以控制文本的对齐方式

text-align: justify;		将文本隔开，使每行的宽度相等
text-align: center;		可以让文本居中对齐
text-align: right;		可以让文本右对齐
text-align: left;		是默认值，它可以让文本左对齐

box-shadow

box-shadow 属性用来给元素添加阴影，该属性值是由逗号分隔的一个或多个阴影列表

box-shadow 属性的阴影依次由下面这些值描述：

  • offset-x 阴影的水平偏移量；
  • offset-y 阴影的垂直偏移量；
  • blur-radius 模糊半径；
  • spread-radius 阴影扩展半径；
  • color

其中 blur-radius 和 spread-radius 是可选的

box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

降低元素的透明度

CSS 里的 opacity 属性用来设置元素的透明度

属性值为 1 代表完全不透明
属性值为 0.5 代表半透明
属性值为 0 代表完全透明

透明度会应用到元素内的所有内容，不论是图片，还是文本，或是背景色

text-transform

CSS 里的 text-transform 属性可以改变英文字母的大小写

值结果
lowercase“transform me”
uppercase“TRANSFORM ME”
capitalize“Transform Me”
initial使用默认值
inherit使用父元素的 text-transform 值
noneDefault: 不改变文字

调整锚点悬停状态

伪类是可以添加到选择器上的关键字，用来选择特定状态的元素

a:hover {
  color: red;
}

使用 :hover 伪类选择器来选取超链接的悬停状态

元素定位

更改相对位置

在 CSS 里一切 HTML 元素皆为盒子，也就是通常所说的盒模型。 块级元素自动从新的一行开始（比如标题、段落以及 div），行内元素排列在上一个元素后（比如图片以及 span）。 元素默认按照这种方式布局称为文档的普通流，同时 CSS 提供了 position 属性来覆盖它

p {
  position: relative;
  top: 15px;
}

把元素的位置设置成相对，并不会改变该元素在布局中所占的位置，也不会对其它元素的位置产生影响

绝对定位

和 relative 定位不一样，绝对定位会将元素从当前的文档流里面移除，周围的元素会忽略它

position: absolute;

绝对定位比较特殊的一点是元素的定位参照于最近的 positioned 祖先元素。 如果它的父元素没有添加定位规则（默认是 position: relative;），浏览器会继续寻找直到默认的 body 标签

固定定位

fixed 定位，它是一种特殊的绝对（absolute）定位，将元素相对于浏览器窗口定位

position: fixed;

fixed 和 absolute 的最明显的区别在于，前者定位的元素不会随着屏幕滚动而移动

float属性

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

<head>
  <style>
    #left {
      float: left;
      width: 50%;
    }
    #right {
      float: right;
      width: 40%;
    }
    aside, section {
      padding: 2px;
      background-color: #ccc;
    }
  </style>
</head>
<body>
  <header>
    <h1>Welcome!</h1>
  </header>
  <section id="left">
    <h2>Content</h2>
    <p>Good stuff</p>
  </section>
  <aside id="right">
    <h2>Sidebar</h2>
    <p>Links</p>
  </aside>
</body>

float浮动

z-index属性

当一些元素在位置上重叠时（例如，使用 position: absolute | relative | fixed | sticky 时），在 HTML 里后出现的元素会默认显示在更早出现的元素的上面

可以使用 z-index 属性指定元素的堆叠次序。 z-index 的取值是整数，数值大的元素会叠放到数值小的元素上面

元素水平居中

常见的实现方式是把块级元素的 margin 值设置为 auto

margin: auto;

同样的，这个方法也对图片奏效。 图片默认是内联元素，但是可以通过设置其 display 属性为 block来把它变成块级元素

CSS线性渐变

语法

background: linear-gradient(gradient_direction, color 1,color 2,...)

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

background: linear-gradient(35deg, #CCFFFF, #FFCCCC);

创建条纹元素

repeating-linear-gradient() 函数和 linear-gradient() 很像，主要区别是前者会重复指定的渐变

0px [yellow -- blend -- blue] 40px [green -- blend -- red] 80px

background: repeating-linear-gradient(
      90deg,
      yellow 0px,
      blue 40px,
      green 40px,
      red 80px
);

更改元素大小

CSS 属性 transform 里面的 scale() 函数可以用来改变元素的显示比例

p {
  transform: scale(2);
}

把页面的段落元素放大到了原来的 2 倍

还能通过伪类选择器来和元素进行交互

div:hover {
  transform: scale(1.5);
}

这样将鼠标悬停在元素上时，大小缩放成原来的1.5倍

沿X、Y轴倾斜元素

用到的是transform 属性是 skewX()、skewY()

transform: skewX(24deg);
transform: skewY(24deg);

伪元素before和after

::before 创建一个伪元素，它是所选元素的第一个子元素； ::after 创建一个伪元素，它是所选元素的最后一个子元素

.heart::before {
  content: "";
  background-color: yellow;
  border-radius: 25%;
  position: absolute;
  height: 50px;
  width: 70px;
  top: -50px;
  left: 5px;
}

::before 和 ::after 必须配合 content 来使用。这个属性通常用来给元素添加内容诸如图片或者文字。

animation属性

关键帧和动画

animation-name 用来设置动画的名称；animation-duration 设置动画所花费的时间；@keyframes 可以通过设置特定时间点的行为来创建动画

#anim {
  animation-name: raimbow;
  animation-duration: 4s;
}

@keyframes rainbow {		<!--设置特定时间点的行为来创建动画-->
  0% {
    background-color: blue;
  }
  50% {
    background-color: green;
  }
  100% {
    background-color: yellow;
  }
}

修改动画填充模式

animation-fill-mode 属性为 forwards，使用户把鼠标悬停在按钮上时，按钮保持高亮

<style>
  button {
    border-radius: 5px;
    color: white;
    background-color: #0F5897;
    padding: 5px 10px 8px 10px;
  }
  button:hover {
    animation-name: background-color;
    animation-duration: 500ms;
    
    animation-fill-mode: forwards;
    
  }
  @keyframes background-color {
    100% {
      background-color: #4791d0;
    }
  }
</style>
<button>Register</button>

CSS创建动画

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

100% {
  top: 0px;
  left: 25px;
}

动画计数

animation-iteration-count，这个属性允许你控制动画循环的次数

animation-iteration-count: 3;

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

关键字更改动画定时器

在 CSS 动画里，animation-timing-function 用来定义动画的速度曲线。 速度曲线决定了动画从一套 CSS 样式变为另一套所用的时间

有一些预定义的关键字可用于常见的选项。

默认值是 ease，动画以低速开始，然后加快，在结束前变慢。

其它常用的值包括 ease-out：动画以高速开始，以低速结束；

ease-in，动画以低速开始，以高速结束；

linear：动画从头到尾的速度是相同的。

可以用 cubic-bezier 来定义贝塞尔曲线。

animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);

在 CSS 里面通过 (x1, y1, x2, y2) 来确定 p1 和 p2。

两个点的 x 和 y 值相等，元素匀速运动。y比x运动得快，元素运动变慢。

x 值只能在 0 到 1，但是 y 值是可以大于 1 的。