背景
属性 描述
background 简写属性，作用是将背景属性设置在一个声明中
background-attachment 背景图像是否固定或者随着页面的其余部分滚动
background-color 设置元素的背景颜色
background-image 把图像设置为背景
background-position 设置背景图像的起始位置
background-repeat 设置背景图像是否及如何重复：水平重复或者垂直重复
background-size 设置背景的大小(兼容性)
background-position：默认左上角
x y
x% y%
[top | center | bottom] [left | center | right]
background-repeat
no-repeat：背景图片在规定位置
repeat-x：图片横向重复
repeat-y：图片纵向重复
repeat：全部重复
background-size
100px 100px
contain：包含，正好包含，对图片进行等比的缩放
cover：一般用于图片，比如打开后可以看到里面的风景，但风景不一定全部展示出来
，超出部分会隐藏掉，但是打开后会展示。
background-color: #F00;
background-image: url(background.gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 0 0;
可以缩写为一句：
background: #f00 url(background.gif) no-repeat fixed 0 0;
http://js.jirengu.com/yajijezavo/1/edit?html,css,output
CSS Sprite
指将不同的图片/图标合并在一张图上。
使用CSS Sprite 可以减少网络请求，提高网页加载性能。
可看京东的网页
隐藏or透明
opacity: 0 ; 透明度为0，整体
visibility: hidden ;本身还是存在的，浏览器也知道 和opacity:0 类似
display:none; 消失，不占用位置
background-color: rgba(0，0，0，0.2) 只是背景色透明
inline-block
既呈现 inline 特性(不占据一整行，宽度由内容宽度决定)
又呈现 block 特性 (可设置宽高，内外边距)
缝隙问题：
1.可以将两个元素挨在一起
2.也可以用div包裹住，然后用font-size设置；
页面上按钮并排，又处在居中的位置：
1.让这些元素display：inline-block;然后再text-align:center
2.用div包裹，然后设置宽度，用margin：0 auto；
vertical-align:top|bottom;基线对其方式。和行内元素和表格绑定在一起用的。
http://js.jirengu.com/talanehixe/1/edit
line-height：单行文本的高度，可继承
line-height: 2：本身文字高度的2倍，要想要文字都有几倍的行高，就用数字，不要用百分比。
line-height: 200%：父容器，父元素高度的2倍，百分比是指相对
height = line-heihgt 来垂直居中单行文本
盒模型
标准盒模型的width和height是指content的指，而老的IE盒模型的width和height是指padding+border+content。
区别
W3C标准中padding、border所占的空间不在width、height范围内，大家俗称的IE的盒模型
width包括content尺寸＋padding＋border
e678怪异模式（不添加 doctype）使用 ie 盒模型，宽度=边框+padding+内容宽度
chrome， ie9+, ie678(添加 doctype) 使用标准盒模型， 宽度= 内容宽度
<!doctype html>
使用css3新样式box-sizing
box-sizing: content-box：w3c标准盒模型
box-sizing: border-box：“IE盒模型”
<div style="height:200px;width:200px;border:solid 10px #333;
padding:100px;box-sizing: border-box;">
</div>
http://js.jirengu.com/giraquruma/1/edit?html,css,output
ICON的实现方式
一.使用image实现
注意事项
1.img的大小设置
2.img的vertical-align
3.请求数过多
明明可以发更少的请求，却要发很多的请求
1，对用户有慢的体验，但是随着htttp2时代，就不慢，
2.在服务器端，请求多有压力
3.对网站流量有影响，多花钱
二.CSS Sprites
CSS精灵图
1.是把两个图片用PS拼接到一张图片上再用css来实现
2.用npm css sprites，命令行
3.用在线工具做：http://www.cn.spritegen.website-performance.org
CSS Sprite Generator
有点：节约请求
缺点：
1.无法缩放
2.不好修改
https://github.com/aslansky/css-sprite
http://js.jirengu.com/zizorilina/1/edit?html,css,output
三.Icon Font
把字体做成图标
比如：X Q
1.制作字体文件
2.声明font-family
1.使用本地链接
2.使用第三方链接
3.使用font-family
1.使用HTML实体
2.使用CSS：before
http://js.jirengu.com/pajosefata/1/edit?html,css,output
四：CSS icon
用CSS画
css能画圆，能画方，为什么不能画icon？
五.SVG
1.img src=svg
2.SVG "sprites":移动端首选
