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

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;
}