CSS 3学习——box-sizing和背景

box-sizing

在CSS 2中设置元素的width和height仅仅是设置了元素内容区的宽和高，元素实际的尺寸是margin + border + padding + 内容区。

CSS 3（截止到2016年12月6日该属性还是草案）中新加了box-sizing属性，用来重新规定设置元素的width和height时，到底包含哪些区域。

box-sizing的可取值有两个：content-box（默认值）和border-box。

content-box 默认值。该值表示设置元素的width和height时，这两个尺寸实际指的是内容区的尺寸。即：

width = 内容区的宽度

height = 内容区的高度

border-box 该值表示设置元素的width和height时，这两个尺寸实际指的是border + padding + 内容区这三项的总尺寸。即：

width = border-left + padding-left + 内容区宽度 +padding-right + border-right

height = border-top + padding-top + 内容区高度 +padding-bottom + border-bottom

背景

通过background属性可以设置元素的背景样式。

实际上background是以下八个属性的简写（后面跟的是默认值）：

background-color transparent

background-image none

background-size auto auto

background-position 0% 0%

background-repeat repeat

background-origin padding-box

background-clip border-box

background-attachment scroll

background-color

background-color 设置元素的背景颜色

可取值：transparent || 某些表示颜色的英文单词 || 十六进制的颜色名 || rgb颜色名 || rgba

background-image

background-image设置元素的背景图像。通过url()引入，可以引入多张背景图片，用逗号隔开。

默认情况下背景图片从元素的左上角开始（包含border区域）渲染。

background-size

background-size用于重新计算引入背景图片的尺寸。

可以设置多组值，有多组值时，按照图片引入的顺序一一对应。如果设置的值的组数小于引入图片的张数，则余下的图片的尺寸按第一组值计算。每组值可以设置1~2个值，第一个值表示宽度，第二个值表示高度，如果只设置了一个值，第二个值为auto；也可以设置规范中指定的关键字，设置为关键字时，只有一个值。

background-size的可取值：

cover 关键字。表示根据引入图片的原始比例放大图片，使其完全填充整个背景区域。放大后的图片的宽度和高度可能超过背景区域的尺寸，超过部分不显示。

contain 关键字。表示根据引入图片的原始比例放大图片，使图片的宽度或高度中的某一个刚好完全填充背景区域对应的宽度或高度。这种填充方式的结果就是背景区域在水平会垂直方向上会留有空白。

auto 不是关键字。当两个值都是auto时，使用引入图片本来的尺寸。如果只有一个值为auto，那么为auto的值的计算方法是：

如果另一个值是百分数，先根据背景区域的尺寸计算这个百分数的具体值，再用这个计算来的具体值根据引入图片的固有比例计算为auto的那个值。
如果另一个值不是百分数，则直接用这个值根据引入图片的固有比例计算原为auto的那个值。

<percentage> 根据背景区域的尺寸计算。不能为负。如果background-attachment的值为fixed，则根据浏览器视口（viewport）的尺寸计算。

<length> 使用指定的值。不能为负。

注意：有些图片没有固有比例，有些图片没有固有尺寸，还有的图片两者都没有。原则是：

对于contain 或 cover，有固有比例的用固有比例放大。没有的，就使用背景区域的尺寸。
对于两个值都是auto的情况，图像如果有固有宽度和高度，则按这个尺寸。如果没有固有尺寸与固有比例，则按背景区的大小。如果没有固有尺寸但是有固有比例，效果同 contain。如果只有一个固有长度（宽度或高度），但有固有比例，则用这一个固有长度根据固有比例计算另一个值的大小。如果只有一个固有长度（宽度或高度），但没有固有比例，则使用此一个固有长度，另一个值使用背景区域的相应的长度（宽度或高度）。
一个为 auto 另一个不是auto，如果图像有固有比例，则指定的长度使用指定值，未指定的长度由指定值与固有比例计算。如果图像没有固有比例，则指定的长度使用指定值，未指定的长度使用图像相应的固有长度（宽度或高度），若即没有固有比例也没有固有长度（宽度或高度），则使用背景区相应的长度（宽度或高度）。

background-position

background-position 用于指定背景图片在背景区域中的初始位置。

可以设置多组值对应多张背景图片。每组值可以设置1~2个值。

可取值：

关键字：top，bottom，center，left，right。如果只指定一个关键字，则另一个默认为center。
<percentage> 相对于背景区域的尺寸计算，可以为负值。如果只指定一个百分数，则另一个默认为50%。第一个为水平位置，另一个为垂直位置。
像素值或其他CSS单位的值，可以为负值。第一个为水平位置，另一个为垂直位置。如果只指定一个，则另一个默认为50%（相对于背景区域）。

如果引入背景图片的张数大于指定的值的组数，则余下的背景图片的位置根据第一组值计算。

background-repeat

background-repeat指定是否重复或如何重复背景图片。默认其情况下，图片在水平方向上和垂直方向上重复以填满整个背景区域。（根据background-size属性重新计算背景图片的尺寸后再重复）

可取值：

repeat 默认值。在不缩放图片的前提下，在水平方向上和垂直方向上重复图片以填满整个背景区域。

space 不缩放图片。指定为space后，会忽视background-position属性的值，除非某一方向上的空间不足以容纳两张背景图片，此时不会忽视该方向上的background-position的值。填充规则是先紧挨着背景区域的四周边界填充，再向内填充，最后剩余空间会被均分到已填充图片的周围（不包括挨着背景区域四周边界的那一面，可以理解为两端对齐）。

round 不会忽视background-position属性的值。重复填充时会对图片进行缩放（忽视图片的固有比例），最后的结果是背景区域刚好被引入图片的整数个重复填满。

no-repeat 背景图片不会被重复，位置由background-position属性的值确定。

该属性支持单值语法和双值语法。在双值语法中，第一个值表示在水平方向上的重复行为，第二个值表示在垂直方向的重复行为。

单值和双值对照表：

单值	双值
repeat-x	repeat no-repeat
repeat-y	no-repeat repeat
repeat	repeat repeat
no-repeat	no-repeat no-repeat
space	space space
round	round round

background-origin

background-origin规定了背景图片出现区域的具体范围，注意与背景区域区分。

要看到该属性的效果background-repeat属性的值必须为no-repeat。

可取值：

border-box：背景图片延伸到边框border的外边界，但背景图片在下，border的样式在上。

padding-box：背景图片从padding区域的外边界开始渲染，border区域不会出现背景图片。

content-box：背景图片只在内容区域渲染。

background-clip

background-clip用于指定背景区域显示出来的范围。

可取值:

border-box：表示border外边界以内的背景区域都显示出来。

padding-box：表示padding外边界以内的背景都显示，不显示border范围的背景。

content-box：表示内容区的背景都显示，不显示border和padding范围的背景。

background-attachment

background-attachment 如果引入了背景图片，用该属性决定背景图片的滚动特性。支持多张背景图片，可以设置多组值。

可取值：

fixed：表示引入的背景图片相对于浏览器视口（viewport）固定。类似于元素的固定定位。

local：表示背景图片相对于元素的内容固定。如果元素具有滚动机制，则背景图片随着元素内容的滚动而滚动。

scroll：表示背景图片相对于元素本身固定。如果元素具有滚动机制，则背景图片不随元素内容的滚动而滚动。

参考文章：

1、深入浅出CSS3：background-clip,background-origin和border-image教程

2、MDN

3、规范