background属性是CSS中用于设置元素背景的属性，最简单的background属 性名，是针对背景若干设定的合并简写，最早的CSS只能使用单一背景图片，而在现在却可以设置多个背景图片。而不用图片的话，最早的background 只能使用纯色填充，现在却可以使用各种渐变效果。现在所用的模型来自于CSS Backgrounds and Borders Module Level 3所定义的规范，主要分成了8个子属性。
背景颜色之 background-color
background-color是最早，最古老，最…常用的属性之一，取值是唯一的，颜色值。
背景图片之 background-image
background-image顾名思义是设置背景“图片”的，这里的图片并非我们通常意义上理解的“图片”，而是由CSS Image Values and Replaced Content Module所规定的一系列内容，用以替代CSS2中所规定的background-image属性与list-style-image属性中的url参数，或者作为伪元素content的值。现在浏览器也没有完全实现这些，可用的包括url()引用图片，和渐变“图片”，然后以逗号分隔所有图片（如果有）。
CSS 渐变
CSS渐变分成两种，linear-gradient()的线性渐变和radial-gradient()的 径向渐变。两个渐变在早期不同浏览器上的实现语法大相径庭，所以用的人较少，还是倾向于使用图片，现在各个浏览器的显示和实现已经基本趋向于一致，而且在 手机端也有比较好的实现，在移动端开发完全可以广泛使用了（但是在兼容IE9-的时候还是╮(╯_╰)╭），下面是详细介绍，也可以用生成器来搞定啦。
线性渐变：linear-gradient(, [, ]+);
径向渐变：
radial-gradient([ [ || ] [ at
]? , | at
, ]? [ , ]+)
我本想把这个语法简写一下的…减来简去发现还是这么写就好了（毕竟人家规范就是这么写的，果然深思熟虑过）…从后往前说
比如如下三行代码，就是等价的：
radial-gradient(yellow, green);radial-gradient(ellipse at center, yellow 0%, green 100%);radial-gradient(farthest-corner at 50% 50%, yellow, green);
重复渐变：repeating-linear-gradient()和repeating-radial-gradient()
背景重复之 background-repeat
background-repead用于设置背景的重复方式，可选值有下面几种：
背景固定之 background-attachment
background-attachment用于设置背景相对的固定方式，可选值有：
背景定位之 background-position
background-positon，顾名思义就是用来定位的…但是这个定位吧…语法很复杂（或者说很随意）。可用的各种指示方向的关键字，也可以用数字单位或者百分比，写法有下面几种：
背景裁切之 background-clip
background-clip是设定背景所覆盖的范围的属性。可选值有：
背景原点之 background-origin
background-origin指定了背景图片定位的原点。属性取值与background-clip相同，但是clip是会对背景图片进行裁切，而origin是用于定位的。
可以看这个Demo，展现得比较清晰了。
背景尺寸之 background-size
background-size用来设置背景尺寸，可选值有：
变形金刚之 background
background是上面8个属性的总和…可以把所有属性写在一起。顺序不限，以空格隔开即可，但有几个需要注意的点：
合体战士之多重背景
从CSS3时代开始，CSS背景开始支持多个背景图，设置在一起了。
只要将每张背景图以逗号分开，那么浏览器就会依次加载，并把写在后面的叠在上面。
对于分开设置的背景属性，也可以以逗号分隔，分别设置。但是如果，你只想设置其中某一张图片的特定属性，那你就得把其他的也都写上才行…
以及，背景颜色是唯一的（摊手），在使用background简写的时候，背景颜色要设置在最后一个逗号之后。
还有什么？
还有，在去年最新的Compositing and Blending草案中，提出了混合模式的规范草案，涉及到背景的属性是background-blend-mode，于本文成文时，只有Chrome和FF两大浏览器支持这一属性。
如果各位有玩过Photoshop的话，应该会对Photoshop中的混合模式有所耳闻，二者意思差不多。background-blend-mode的可选参数包括：normal（普通），multiply（正片叠底），screen（滤色），overlay（叠加），darken（变暗），lighten（变亮），color-dodge（颜色减淡），color-burn（颜色加深），hard-light（强光），soft-light（柔光），difference（差值），exclusion（排除），hue（色相），saturation（饱和度），color（颜色），luminosity（明度）。
这些参数的中文都是我根据Photoshop的混合模式直接翻译过来的（繁体用户可以参考这里），规范草案中也给出了每种混合模式的算法和演示效果，因为时间问题我就不一一验证效果了，如果有出入均以实际效果为准。MDN上有实际演示的Demo，我前面提到的那个网站也有很多实际的展示。
当然这些混合模式也可以应用在其他图像（比如SVG）上，我觉得这完全是为了让那些设计师和前端工程师之间少一些争吵多一些真诚（摊手）。
CSS常用布局属性
定位
谈及定位，我们就得从position属性说起。你能准确的说出position的属性值吗？相信你可以完美地说出这么六个属性值：static、relative、absolute、fixed、sticky和inherit。
static(默认)：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分；行内元素则会创建一个或多个行框，置于其父元素中。
relative：元素框相对于之前正常文档流中的位置发生偏移，并且原先的位置仍然被占据。发生偏移的时候，可能会覆盖其他元素。
absolute：元素框不再占有文档流位置，并且相对于包含块进行偏移(所谓的包含块就是最近一级外层元素position不为static的元素)
fixed：元素框不再占有文档流位置，并且相对于视窗进行定位
sticky：(这是css3新增的属性值)粘性定位，官方的介绍比较简单，或许你不能理解。其实，它就相当于relative和fixed混合。最初会被当作是relative，相对于原来的位置进行偏移；一旦超过一定阈值之后，会被当成fixed定位，相对于视口进行定位。demo地址
简单地，介绍一下position的属性值的含义后，在来看一下偏移量top、right、bottom、left四个属性。
**relative：**它的偏移是相对于原先在文档流中的位置，如图：。
**absolute：**它的偏移量是相对于最近一级position不是static的祖先元素的。
**fixed：**它的偏移量是相对于整个视图窗口的。
尺寸
盒子模型：每个元素，都会形成一个矩形块，主要包括四部分：margin(外边距)+border(边框)+padding(内边距)+content(内容)
width： 这是标准盒子模型，可以看到width的长度等于content的宽度；而当将box-sizing的属性值设置成border-box时，盒子模型的width=border+padding+content的总和。
heigth: auto这个属性值表示的是浏览器自动计算。这种自动计算，需要一个基准，一般浏览器都是允许高度滚动的，所以，会导致一个问题——浏览器找不到垂直方向上的基准。但是宽度就可以auto;
浮动
浮动， 这是一个非常有意思的东西，在布局中被广泛的应用。最初，设计浮动时，其实并不是为了布局的，而是为了实现文字环绕的特效，它可以自成一派最初是用来文字环绕。所谓浮动布局就是div收尾相接占据着相应的宽度，不然就是独占一行的div.
最初的布局——table
**两栏布局：**一栏定宽，一栏自适应。这样子做的好处是定宽的那一栏可以做广告，自适应的可以作为内容主体。
左侧部分
右侧部分
.left{ width: 200px; height: 600px; background: red; float: left; display: table; text-align: center; line-height: 600px; color: #fff; }
.right{
margin-left: 210px;
height: 600px;
background: yellow;
text-align: center;
line-height: 600px;
三栏布局： 使用flex进行布局。
左栏
中间
右栏
.left{ width: 200px; height: 300px; background: green; } .middle{ width: 100%; height: 300px; background: red; marign: 0 20px; } .right{ width: 200px; height: 300px; background: yellow; }
