学习过程中遇到的小问题（二）

1.异步加载图片，设置图片宽高一样，同时避免加载出来的图片抖动

W3C标准中，当设置padding-top值为100%时，就是相对于盒子宽度的100%，这样可以保证高度跟宽度一样，宽高相等的容器。所以，当异步加载图片时，为了避免图片加载出来时出现抖动，可以设置外部容器的padding值，保证容器的宽高相等，再将图片绝对定位。

<div class="image-header">
<img src="...">
</div>

.image-header {
position: relative;
width: 100%;
height: 0;
padding-top: 100%;
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}

2.JSON格式的数据转换为对象 JSON.parse(‘JSON格式的数据’)；

{"name": "xiaoni", "age": 18, "sex": "female"}

JSON.parse('{"name": "xiaoni", "age": 18, "sex": "female"}');
结果就转换为一个对象：
{name: "xiaoni", age: 18, sex: "female"}

这时，就可以说使用.属性名来获取对应的属性值了。

3.左右两列高度自适应且相等

<div class="clearfix column">
<div class="left">
DPR 便是 device Pixel Ratio 的简称，即设备像素比，它反映了设备上的物理像素与设备独立像素对应关系，也就是说 DPR 可以让我们知道当前设备下逻辑像素与物理像素的对应情况。它的值可以按照下面的公式计算出来:

设备像素比 = 物理像素 / 设备独立像素
在JavaScript中我们可以直接通过以下window上的属性获取设备像素比
window.devicePixelRatio
而在CSS中，可以通过以下属性获得:

-webkit-device-pixel-ratio;
-webkit-min-device-pixel-ratio;
-webkit-max-device-pixel-ratio;
</div>
<div class="right">
右边内容
</div>
</div>

.column {
width: 980px;
margin: 20px auto;
position: relative;
}

.left {
width: 650px;
background: #ddd;
float: left;
line-height: 30px;
}

.right {
width: 300px;
background: #ddd;
float: right;
margin-bottom: -2000px;
padding-bottom: 2000px;
}或者
.right {
width: 300px;
background: #ddd;
position: absolute;
top: 0;
bottom: 0;
right: 0;
}