CSS知识点归纳回顾

一、背景 background

此属性是一个简写属性，可以在一次声明中定义一个或多个属性：background-clip、background-color、background-image、background-origin、background-position、background-repeat、background-size，和 background-attachment。

background-attachment

属性决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。

• fixed

• 此关键属性值表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。

• local

• 此关键属性值表示背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动，并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。

• scroll

• 此关键属性值表示背景相对于元素本身固定，而不是随着它的内容滚动（对元素边框是有效的）。

多背景图支持

此属性支持多张背景图片。你可以用逗号分隔来为每一张背景图片指定不同的<attachment>属性值。每一张背景图片顺序对应相应的 attachment 属性。

background-clip

设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。

• border-box

• 背景延伸至边框外沿（但是在边框下层）。

• padding-box

• 背景延伸至内边距（padding）外沿。不会绘制到边框处。

• content-box

• 背景被裁剪至内容区（content box）外沿。

• text 实验性

• 背景被裁剪成文字的前景色。

background-color

设置元素的背景色。 属性值为 color ， 背景色的统一颜色。它在指定的任何 background-image 后面渲染，尽管颜色仍然可以通过图像中任何透明的地方看到。

background-image

属性用于为一个元素设置一个或者多个背景图像。

在绘制时，图像以 z 方向堆叠的方式进行。先指定的图像会在之后指定的图像上面绘制。因此指定的第一个图像“最接近用户”。

然后元素的边框 border 会在它们之上被绘制，而 background-color 会在它们之下绘制。图像的绘制与盒子以及盒子的边框的关系，需要在 CSS 属性background-clip 和 background-origin 中定义。

如果一个指定的图像无法被绘制 (比如，被指定的 URI 所表示的文件无法被加载)，浏览器会将此情况等同于其值被设为 none。

background-origin

规定了指定背景图片background-image 属性的原点位置的背景相对区域。 注意：当使用 background-attachment 为 fixed 时，该属性将被忽略不起作用。

• border-box

• 背景图片的摆放以 border 区域为参考

• padding-box

• 背景图片的摆放以 padding 区域为参考

• content-box

• 背景图片的摆放以 content 区域为参考

background-position

属性为每一个背景图片设置初始位置。这个位置是相对于由 background-origin 定义的位置图层的。

• 一个 <position> 定义一组 x/y 坐标（相对于一个元素盒子模型的边界），来放置项目（原文为 item）。它可以使用一到四个值进行定义。如果使用两个非关键字值，第一个值表示水平位置，第二个值表示垂直位置。如果仅指定一个值，则第二个值默认是 center。如果使用三个或四个值，则长度百分比值是前面关键字值的偏移量。

  一个值的语法：  值可能是：

  • 关键字 center，用来居中背景图片。
  • 关键字 top、left、bottom、right 中的一个。用来指定把这个项目（原文为 item）放在哪一个边界。另一个维度被设置成 50%，所以这个项目（原文为 item）被放在指定边界的中间位置。
  • <length> 或 <percentage>。指定相对于左边界的 x 坐标，y 坐标被设置成 50%。

  两个值的语法：  一个定义 x 坐标，另一个定义 y 坐标。每个值可以是：

  • 关键字 top、left、bottom、right 中的一个。如果这里给出 left 或 right，那么这个值定义 x 轴位置，另一个值定义 y 轴位置。如果这里给出 top 或 bottom，那么这个值定义 y 轴位置，另一个值定义 x 轴位置。
  • <length> 或 <percentage>。如果另一个值是 left 或 right，则该值定义相对于顶部边界的 Y。如果另一个值是 top 或 bottom，则该值定义相对于左边界的 X。如果两个值都是 <length> 或 <percentage> 值，则第一个定义 X，第二个定义 Y。
  • 注意：如果一个值是 top 或 bottom，那么另一个值不可能是 top 或 bottom。如果一个值是 left 或 right，那么另一个值不可能是 left 或 right。也就是说，例如，top top 和 left right 是无效的。
  • 排序：配对关键字时，位置并不重要，因为浏览器可以重新排序，写成 top left 或 left top 其产生的效果是相同的。使用 <length> 或 <percentage> 与关键字配对时顺序非常重要，定义 X 的值放在前面，然后是定义 Y 的值， right 20px 和 20px right 的效果是不相同的，前者有效但后者无效。left 20% 或 20% bottom 是有效的，因为 X 和 Y 值已明确定义且位置正确。
  • 默认值是 left top 或者 0% 0%。

  三个值的语法：  两个值是关键字值，第三个是前面值的偏移量：

  • 第一个值是关键字 top、left、bottom、right，或者 center。如果设置为 left 或 right，则定义了 X。如果设置为 top 或 bottom，则定义了 Y，另一个关键字值定义了 X。
  • <length> 或 <percentage>，如果是第二个值，则是第一个值的偏移量。如果是第三个值，则是第二个值的偏移量。
  • 单个长度或百分比值是其前面的关键字值的偏移量。一个关键字与两个 <length> 或 <percentage> 值的组合无效。

  四个值的语法：  第一个和第三个值是定义 X 和 Y 的关键字值。第二个和第四个值是前面 X 和 Y 关键字值的偏移量：

  • 第一个值和第三个值是关键字值 top、left、bottom、 right 之一。如果设置为 left 或 right，则定义了 X。如果设置为 top 或 bottom，则定义了 Y，另一个关键字值定义了 X。
  • 第二个和第四个值是 <length> 或 <percentage>。第二个值是第一个关键字的偏移量。第四个值是第二个关键字的偏移量。

关于百分比：

给定背景图像位置的百分比偏移量是相对于容器的。值 0% 表示背景图像的左（或上）边界与容器的相应左（或上）边界对齐，或者说图像的 0% 标记将位于容器的 0% 标记上。值为 100% 表示背景图像的 右（或 下）边界与容器的 右（或 下）边界对齐，或者说图像的 100% 标记将位于容器的 100% 标记上。因此 50% 的值表示水平或垂直居中背景图像，因为图像的 50% 将位于容器的 50% 标记处。类似的，background-position: 25% 75% 表示图像上的左侧 25% 和顶部 75% 的位置将放置在距容器左侧 25% 和距容器顶部 75% 的容器位置。

基本上发生的情况是从相应的容器尺寸中减去背景图像尺寸，然后将结果值的百分比用作从左（或顶部）边界的直接偏移量。

(container width - image width) * (position x%) = (x offset value)
(container height - image height) * (position y%) = (y offset value)

以 X 轴为例，假设我们有一个 300px 宽的图像，我们在一个 100px 宽的容器中使用它，background-size 设置为 auto：

100px - 300px = -200px (container & image difference)

因此，位置百分比为 -25%、0%、50%、100%、125%，我们得到这些图像到容器边界偏移值：

-200px * -25% = 50px
-200px * 0% = 0px
-200px * 50% = -100px
-200px * 100% = -200px
-200px * 125% = -250px

因此，对于我们的示例，使用这些结果值，让图像的左边界从容器的左边界偏移：

• • 50px（将图像左边界放在 100px 宽容器的中心）
• 0px（图像左边界与容器左边界重合）
• -100px (将图片相对容器左移 100px，这意味着图片中部的 100px 内容将出现在容器中)
• -200px (将图片相对容器左移 200px，这意味着图片右部分的 100px 内容将出现在容器中)
• -250px (将图片相对容器左移 250px，这意味着图片的右边界对齐容器的中线)

值得一提的是，如果你的 background-size 等于给定轴的容器大小，那么该轴的 百分比 位置将不起作用，因为“容器图像差异”将为零。你将需要使用绝对值进行偏移。

子属性

background-position-x

background-position-y

background-repeat

属性定义背景图像的重复方式。背景图像可以沿着水平轴，垂直轴，两个轴重复，或者根本不重复。

默认情况下，重复的图像被剪裁为元素的大小，但它们可以缩放 (使用 round) 或者均匀地分布 (使用 space).

单值语法是完整的双值语法的简写：

单值	等价于双值
repeat-x	repeat no-repeat
repeat-y	no-repeat repeat
repeat	repeat repeat
space	space space
round	round round
no-repeat	no-repeat no-repeat

在双值语法中，第一个值表示水平重复行为，第二个值表示垂直重复行为。下面是关于每一个值是怎么工作的具体说明：

值	描述
repeat	图像会按需重复来覆盖整个背景图片所在的区域。最后一个图像会被裁剪，如果它的大小不合适的话。
space	图像会尽可能得重复，但是不会裁剪。第一个和最后一个图像会被固定在元素 (element) 的相应的边上，同时空白会均匀地分布在图像之间。background-position属性会被忽视，除非只有一个图像能被无裁剪地显示。只在一种情况下裁剪会发生，那就是图像太大了以至于没有足够的空间来完整显示一个图像。
round	随着允许的空间在尺寸上的增长，被重复的图像将会伸展 (没有空隙), 直到有足够的空间来添加一个图像。当下一个图像被添加后，所有的当前的图像会被压缩来腾出空间。例如，一个图像原始大小是 260px, 重复三次之后，可能会被伸展到 300px, 直到另一个图像被加进来。这样他们就可能被压缩到 225px.译者注：关键是浏览器怎么计算什么时候应该添加一个图像进来，而不是继续伸展。
no-repeat	图像不会被重复 (因为背景图像所在的区域将可能没有完全被覆盖). 那个没有被重复的背景图像的位置是由background-position属性来决定。

background-size

设置背景图片大小。图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。

单张图片的背景大小可以使用以下三种方法中的一种来规定：

• 使用关键词 contain
• 使用关键词 cover
• 设定宽度和高度值

当通过宽度和高度值来设定尺寸时，你可以提供一或者两个数值：

• 如果仅有一个数值被给定，这个数值将作为宽度值大小，高度值将被设定为 auto。
• 如果有两个数值被给定，第一个将作为宽度值大小，第二个作为高度值大小。

每个值可以是<length>, 是 <percentage>, 或者 auto.

属性值

• <length>

  <length> 值，指定背景图片大小，不能为负值。

• <percentage>

  <percentage> 值，指定背景图片相对背景区（background positioning area）的百分比。背景区由background-origin设置，默认为盒模型的内容区与内边距，也可设置为只有内容区，或者还包括边框。如果attachment 为fixed，背景区为浏览器可视区（即视口），不包括滚动条。不能为负值。

• auto

  以背景图片的比例缩放背景图片。

• cover

  缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。和 contain 值相反，cover 值尽可能大的缩放背景图像并保持图像的宽高比例（图像不会被压扁）。该背景图以它的全部宽或者高覆盖所在容器。当容器和背景图大小不同时，背景图的 左/右 或者 上/下 部分会被裁剪。

• contain

  缩放背景图片以完全装入背景区，可能背景区部分空白。contain 尽可能的缩放背景并保持图像的宽高比例（图像不会被压缩）。该背景图会填充所在的容器。当背景图和容器的大小的不同时，容器的空白区域（上/下或者左/右）会显示由 background-color 设置的背景颜色。

位图一定有固有尺寸与固有比例，矢量图可能两者都有，也可能只有一个。渐变视为只有固有尺寸或者只有固有比例的图片。