JavaScript基础习题

1.实现输入框的双向绑定

解析：所谓双向绑定，即view->model, model->view,可以考虑对象劫持，监听对象属性的变化

    <input type="input" id="input">
    <span id="show"></span>
    <script>
        var obj = {};
        Object.defineProperty(obj, 'txt', {
            get: function () {
                return obj;
            },
            set: function (newValue) {
                document.getElementById('input').value = newValue;
                document.getElementById('show').innerHTML = newValue;
            }
        });
        document.getElementById('input').addEventListener('keyup', function (e) {
            obj.txt = e.target.value;
        });
    </script>

 2.CSS中的“父相子绝”定位

在实际应用开发中，有个不成文的规定，“父相子绝”，一般的应用场景是子元素居中对齐等，以及行内元素的布局；

其实绝对定位（absolute）的参照对象是——离他最近的已定位的祖先元素，这句话有两个关键词；

一个是“离它最近的祖先元素”，意思是那个参照元素不一定是父元素，也可以是爷爷元素，爷爷的爷爷元素等等，如果他的祖先里同时有2个及以上的元素，就参照离他最近的元素定位；

还有一个是“已定位”，这个定位也不一定非要相对定位，也可以是绝对定位，为什么一般用相对定位呢？因为相对定位的特性是虽然它定位了，就算给了偏移量它离开了原来的地方，但是它原来的地方也不会让出来，这样的好处是原来在他周围的其他元素不会因为它的离开而改变位置使页面布局错乱。

3.实现元素的垂直居中定位

.wraper{
     position: relative;
     .box{
        position: absolute;
        top: 50%;
        left: 50%;
        margin:-50px 0 0 -50px;
     }     
}

.wraper{
     position: relative;
     .box{
        position: absolute;
        top: 50%;
        left: 50%;
        transform:translate(-50%,-50%);
     }     
}

.wraper{
     position: relative;
     .box{
        display:flex;
        justify-content: center;
        align-items: center;
     }     
}