background;box-sizing;@2x;

介绍各种关于css和css3相关属性的使用
background box-sizing

background

background-image

background-image 可以放置多张图片

background-size

设置图片的大小100%图片原尺寸 20%图片原尺寸的20%
contain 以区域最短的宽（或高）为准，成比例填充
cover 图片覆盖整个背景区域

background-clip

决定显示背景图片的哪部分
padding-box 显示内边距以内的背景
border-box 显示边框以内的背景
content-box 显示内容区域的背景

background-origin：

决定背景图片怎么放置
border-box 边框以内开始放置
padding-box 内边距以内开始放置
content-box 内容区域开始放置

background-position：

同-origin 一个原理，只是具体定位背景图片从哪开始放置

background-color：

background-color:设置背景的图片

background-repeat：

background-repeat：设置背景图片是否重复铺设

background-attchment：

background-attachment: scroll|fixed|local|initial|inherit;

设备像素比devicePixelRatio简单介绍

定义如下：

window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。
公式表示就是：window.devicePixelRatio = 物理像素 / dips dip或dp,（device independent pixels，设备独立像素）与屏幕密度有关。dip可以用来辅助区分视网膜设备还是非视网膜设备。
所有非视网膜屏幕的iphone在垂直的时候，宽度为320物理像素。当你使用的时候，会设置视窗布局宽度（不同于视觉区域宽度，不放大显示情况下，两者大小一致，见下图）为320px, 于是，页面很自然地覆盖在屏幕上。
这样，非视网膜屏幕的iphone上，屏幕物理像素320像素，独立像素也是320像素，因此，window.devicePixelRatio等于1.
而对于视网膜屏幕的iphone，如iphone4s, 纵向显示的时候，屏幕物理像素640像素。同样，当用户设置的时候，其视区宽度并不是640像素，而是320像素，这是为了有更好的阅读体验 – 更合适的文字大小。
这样，在视网膜屏幕的iphone上，屏幕物理像素640像素，独立像素还是320像素，因此，window.devicePixelRatio等于2.

说明

case1 ：对于苹果电脑是视网膜屏幕，图片常常看起来模糊，需要适配2x，利用css3新样式，可以做到，但低版本的兼容性较差

图片问题

note:ie6下png24不透明 gif和png8透明

适配2倍像素写法
为了保证在一倍像素和2倍像素下使用icon的background-size不变
@2x图片是@1x图片的2倍合成的雪碧图也要是2倍(宽或者高度)
这样 @2x下 bacground-size 设置成和@1x一样的高度或者宽度

.icon{
  display:inline-block;
  position:absolute;
  //top:0;
  width:16px;
  height:30px;
  background:url('http://img.58cdn.com.cn/ui8/house/detail/images/zufang-detail-icon@1x.png')no-repeat center;
  
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),only screen and (min-device-pixel-ratio:2) {
  .icon{
    background-image:url(http://img.58cdn.com.cn/ui8/house/detail/images/zufang-detail-icon@2x.png);
    background-size: auto 80px;
  }
}
另一种写法
.newaplogo {
    width: 270px;
    height: 70px;
    background: url(http://img.58cdn.com.cn/ui8/house/list/img/58logon.png?20160704) no-repeat;
    background-image: -webkit-image-set(url(http://img.58cdn.com.cn/ui8/house/list/img/58logon.png?20160704) 1x,url(http://img.58cdn.com.cn/ui8/house/list/img/58logon@2x.png?20160704) 2x);
    float: left;
    margin-right: 30px
}

box-sizing

兼容到ie8

width:100px;
height:100px;
padding:2px;
border:2px solid #000;
box-sizing:content-box;//宽度和高度分别应用到元素的内容框。
                         //在宽度和高度之外绘制元素的内边距和边框
box-sizing:border-box;//为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。